72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
function setTooltip(container, content) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'tooltip-wrapper tooltip-color';
|
|
wrapper.style.visibility = 'hidden';
|
|
wrapper.style.opacity = 0;
|
|
const pointer = document.createElement('div');
|
|
pointer.className = 'tooltip-pointer tooltip-color';
|
|
const curtain = document.createElement('div');
|
|
curtain.className = 'tooltip-curtain tooltip-color';
|
|
wrapper.append(pointer, curtain);
|
|
|
|
const cnt = document.createElement('div');
|
|
cnt.className = 'tooltip-content';
|
|
if (content instanceof HTMLElement) {
|
|
cnt.appendChild(content);
|
|
} else {
|
|
cnt.innerText = content;
|
|
}
|
|
wrapper.appendChild(cnt);
|
|
container.insertAdjacentElement('afterend', wrapper);
|
|
|
|
let tid;
|
|
container.addEventListener('mouseenter', () => {
|
|
tid && clearTimeout(tid);
|
|
tid = setTimeout(() => {
|
|
while (container?.offsetWidth == null) {
|
|
container = container.parentElement;
|
|
}
|
|
if (container == null) {
|
|
return;
|
|
}
|
|
let left = container.offsetLeft;
|
|
let top = container.offsetTop;
|
|
// let parent = container.parentElement;
|
|
// while (parent != null) {
|
|
// left -= parent.scrollLeft;
|
|
// top -= parent.scrollTop;
|
|
// parent = parent.parentElement;
|
|
// }
|
|
left -= wrapper.offsetWidth / 2 - container.offsetWidth / 2;
|
|
top -= wrapper.offsetHeight + 14;
|
|
wrapper.style.left = `${left}px`;
|
|
wrapper.style.top = `${top}px`;
|
|
wrapper.style.visibility = 'visible';
|
|
wrapper.style.opacity = 1;
|
|
}, 100);
|
|
});
|
|
container.addEventListener('mouseleave', () => {
|
|
tid && clearTimeout(tid);
|
|
tid = setTimeout(() => {
|
|
wrapper.style.visibility = 'hidden';
|
|
wrapper.style.opacity = 0;
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
function resolveTooltip(container = document.body) {
|
|
const tips = container.querySelectorAll('[title]');
|
|
for (let tip of tips) {
|
|
const title = tip.getAttribute('title');
|
|
if (title != null) {
|
|
tip.removeAttribute('title');
|
|
setTooltip(tip, title);
|
|
}
|
|
}
|
|
return container;
|
|
}
|
|
|
|
export {
|
|
setTooltip,
|
|
resolveTooltip
|
|
} |