diff --git a/app/src/dialog/tooltip.ts b/app/src/dialog/tooltip.ts index a547cd138..97ac0f546 100644 --- a/app/src/dialog/tooltip.ts +++ b/app/src/dialog/tooltip.ts @@ -1,5 +1,7 @@ import {isMobile} from "../util/functions"; +let hideTooltipTimeout: NodeJS.Timeout | null = null; + export const showTooltip = (message: string, target: Element, tooltipClass?: string) => { if (isMobile()) { return; @@ -9,17 +11,33 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str hideTooltip(); return; } - let messageElement = document.getElementById("tooltip"); - if (!messageElement) { - document.body.insertAdjacentHTML("beforeend", `
${message}
`); - messageElement = document.getElementById("tooltip"); - } else { - messageElement.className = "tooltip"; - messageElement.innerHTML = message; + + // 清除 hideTooltip 的定时器 + if (hideTooltipTimeout) { + clearTimeout(hideTooltipTimeout); + hideTooltipTimeout = null; } - if (tooltipClass) { - messageElement.classList.add("tooltip--" + tooltipClass); + let messageElement = document.getElementById("tooltip"); + if (!messageElement) { + document.body.insertAdjacentHTML("beforeend", `
${message}
`); + messageElement = document.getElementById("tooltip"); + } else { + const currentClassName = messageElement.className; + const currentMessage = messageElement.textContent; + + let newClassName = "tooltip"; + if (tooltipClass) { + newClassName += " tooltip--" + tooltipClass; + } + // 避免不必要的更新 + if (currentClassName !== newClassName) { + messageElement.className = newClassName; + } + if (currentMessage !== message) { + // 鼠标在按钮等多层结构的元素上小幅移动时会频繁更新 + messageElement.innerHTML = message; + } } let left = targetRect.left; @@ -32,12 +50,7 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str left = targetRect.right - messageElement.clientWidth; } - if (position?.endsWith("bottom")) { - top += parseInt(position.replace("right", "").replace("left", "")); - } else if (position?.endsWith("top")) { - // 编辑器动态滚动条 - top = targetRect.top - messageElement.clientHeight; - } else if (position === "parentE") { + if (position === "parentE") { // file tree and outline、backlink top = parentRect.top; left = parentRect.right + 8; @@ -45,6 +58,11 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str // 数据库属性视图 top = parentRect.top + (parseInt(position) || 8); left = parentRect.left - messageElement.clientWidth; + } else if (position?.endsWith("bottom")) { + top += parseInt(position.replace("right", "").replace("left", "")); + } else if (position?.endsWith("top")) { + // 编辑器动态滚动条 + top = targetRect.top - messageElement.clientHeight; } const topHeight = position === "parentE" ? top : targetRect.top; @@ -52,6 +70,10 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px"; + // 避免原本的 top 和 left 影响计算 + messageElement.style.top = "0px"; + messageElement.style.left = "0px"; + if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) { messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px"; } else { @@ -62,7 +84,7 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str if (position === "parentE") { messageElement.style.left = (parentRect.left - 8 - messageElement.clientWidth) + "px"; } else { - messageElement.style.left = (window.innerWidth - messageElement.clientWidth) + "px"; + messageElement.style.left = (window.innerWidth - 1 - messageElement.clientWidth) + "px"; } } else { messageElement.style.left = Math.max(0, left) + "px"; @@ -70,8 +92,14 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str }; export const hideTooltip = () => { - const messageElement = document.getElementById("tooltip"); - if (messageElement) { - messageElement.remove(); + if (hideTooltipTimeout) { + clearTimeout(hideTooltipTimeout); } + hideTooltipTimeout = setTimeout(() => { + const messageElement = document.getElementById("tooltip"); + if (messageElement) { + messageElement.remove(); + } + hideTooltipTimeout = null; + }, 50); };