58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
// helpTip.js - 全局tooltip功能，可在不同页面复用
|
||
|
||
// 在页面里复用一个全局 tooltip 节点
|
||
let __globalTooltip;
|
||
|
||
// 确保tooltip节点存在
|
||
function ensureTooltip() {
|
||
if (!__globalTooltip) {
|
||
__globalTooltip = document.createElement('div');
|
||
__globalTooltip.className = 'tooltip-portal';
|
||
document.body.appendChild(__globalTooltip);
|
||
}
|
||
return __globalTooltip;
|
||
}
|
||
|
||
// 绑定到任意图标：移入→显示；移动→跟随；移出→隐藏
|
||
function attachImmediateTooltip(anchorEl, text) {
|
||
const tip = ensureTooltip();
|
||
let shown = false;
|
||
|
||
function show(e) {
|
||
tip.textContent = text;
|
||
tip.style.display = 'block';
|
||
tip.style.opacity = '1';
|
||
position(e);
|
||
shown = true;
|
||
}
|
||
|
||
function position(e) {
|
||
// 以鼠标位置为准
|
||
const padding = 8;
|
||
const tipRect = tip.getBoundingClientRect();
|
||
let x = e.clientX + 12;
|
||
let y = e.clientY - tipRect.height - 12;
|
||
|
||
// 简易防出界
|
||
const vw = window.innerWidth, vh = window.innerHeight;
|
||
if (x + tipRect.width + padding > vw) x = vw - tipRect.width - padding;
|
||
if (y < padding) y = e.clientY + 16; // 放到下面
|
||
|
||
tip.style.left = `${x}px`;
|
||
tip.style.top = `${y}px`;
|
||
}
|
||
|
||
function hide() {
|
||
tip.style.opacity = '0';
|
||
// 用小延迟避免闪烁
|
||
setTimeout(() => { if (!shown) return; tip.style.display = 'none'; }, 100);
|
||
shown = false;
|
||
}
|
||
|
||
anchorEl.addEventListener('mouseenter', show);
|
||
anchorEl.addEventListener('mousemove', position);
|
||
anchorEl.addEventListener('mouseleave', hide);
|
||
}
|
||
|
||
// 导出函数，供其他文件使用
|
||
window.attachImmediateTooltip = attachImmediateTooltip; |