85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
import { createElement } from "../functions";
|
|
|
|
function setTooltip(container, content, flag = false) {
|
|
const tip = container.querySelector('.tooltip-wrapper');
|
|
if (tip != null) {
|
|
tip.remove();
|
|
}
|
|
const wrapper = createElement('div', wrapper => {
|
|
wrapper.className = 'tooltip-wrapper tooltip-color';
|
|
wrapper.style.visibility = 'hidden';
|
|
wrapper.style.opacity = 0;
|
|
},
|
|
createElement('div', 'tooltip-pointer tooltip-color'),
|
|
createElement('div', 'tooltip-curtain tooltip-color'),
|
|
createElement('div', cnt => {
|
|
cnt.className = 'tooltip-content';
|
|
if (content instanceof HTMLElement) {
|
|
cnt.appendChild(content);
|
|
} else {
|
|
cnt.innerText = content;
|
|
}
|
|
})
|
|
);
|
|
// container.insertAdjacentElement('afterend', wrapper);
|
|
container.appendChild(wrapper);
|
|
|
|
let tid;
|
|
container.addEventListener('mouseenter', () => {
|
|
tid && clearTimeout(tid);
|
|
let c = container;
|
|
while (c?.offsetWidth == null) {
|
|
c = c.parentElement;
|
|
}
|
|
if (c == null) {
|
|
return;
|
|
}
|
|
if (!flag || c.scrollWidth > c.offsetWidth) {
|
|
tid = setTimeout(() => {
|
|
let parent = c;
|
|
let left = c.offsetLeft;
|
|
let top = c.offsetTop;
|
|
while ((parent = parent.offsetParent) != null) {
|
|
left += parent.offsetLeft;
|
|
top += parent.offsetTop;
|
|
}
|
|
parent = c;
|
|
while ((parent = parent.parentElement) != null) {
|
|
left -= parent.scrollLeft;
|
|
top -= parent.scrollTop;
|
|
}
|
|
left -= wrapper.offsetWidth / 2 - c.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);
|
|
});
|
|
return container;
|
|
}
|
|
|
|
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
|
|
} |