隐藏悬浮提示增加少许延迟,避免在相邻的元素间移动时悬浮提示频繁闪烁

This commit is contained in:
Jeffrey Chen 2024-12-01 18:30:53 +08:00
parent b00ddb4e1b
commit a8df1b6b95

View file

@ -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,6 +11,13 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
hideTooltip();
return;
}
// 清除 hideTooltip 的定时器
if (hideTooltipTimeout) {
clearTimeout(hideTooltipTimeout);
hideTooltipTimeout = null;
}
let messageElement = document.getElementById("tooltip");
if (!messageElement) {
document.body.insertAdjacentHTML("beforeend", `<div class="tooltip${!tooltipClass ? "" : " tooltip--" + tooltipClass}" id="tooltip">${message}</div>`);
@ -83,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);
};