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);
};