0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/pull/13326

Browse source
This commit is contained in:
Vanessa 2024-12-04 09:24:54 +08:00
parent eac2902d9b
commit a82b9c23fb
1 changed files with 16 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/src/dialog/tooltip.ts
View file

@ -1,6 +1,7 @@
import {isMobile} from "../util/functions";
import {Constants} from "../constants";
let hideTooltipTimeout: NodeJS.Timeout | null = null;
let hideTooltipTimeout: number
export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
if (isMobile()) {
@ -13,35 +14,29 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
}
// 清除 hideTooltip 的定时器
if (hideTooltipTimeout) {
clearTimeout(hideTooltipTimeout);
hideTooltipTimeout = null;
}
clearTimeout(hideTooltipTimeout);
const className = tooltipClass?`tooltip tooltip--${tooltipClass}`:"tooltip";
let messageElement = document.getElementById("tooltip");
if (!messageElement) {
document.body.insertAdjacentHTML("beforeend", `<div class="tooltip${!tooltipClass ? "" : " tooltip--" + tooltipClass}" id="tooltip">${message}</div>`);
document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);
messageElement = document.getElementById("tooltip");
} else {
const currentClassName = messageElement.className;
const currentMessage = messageElement.textContent;
let newClassName = "tooltip";
if (tooltipClass) {
newClassName += " tooltip--" + tooltipClass;
if (messageElement.className !== className) {
messageElement.className = className;
}
// 避免不必要的更新
if (currentClassName !== newClassName) {
messageElement.className = newClassName;
}
if (currentMessage !== message) {
// 鼠标在按钮等多层结构的元素上小幅移动时会频繁更新
if (messageElement.innerHTML !== message) {
messageElement.innerHTML = message;
}
// 避免原本的 top 和 left 影响计算
messageElement.removeAttribute("style");
}
let left = targetRect.left;
let top = targetRect.bottom;
// position: parentE; parentW; ${number}parentW; ${number}bottom;
// right; right${number}bottom; right${number}top; top;
const position = target.getAttribute("data-position");
const parentRect = target.parentElement.getBoundingClientRect();
@ -92,14 +87,11 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
};
export const hideTooltip = () => {
if (hideTooltipTimeout) {
clearTimeout(hideTooltipTimeout);
}
hideTooltipTimeout = setTimeout(() => {
clearTimeout(hideTooltipTimeout);
hideTooltipTimeout = window.setTimeout(() => {
const messageElement = document.getElementById("tooltip");
if (messageElement) {
messageElement.remove();
}
hideTooltipTimeout = null;
}, 50);
}, Constants.TIMEOUT_TRANSITION);
};