109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
import './css/tooltip.scss';
|
|
import { createElement } from "../functions";
|
|
// import { global } from "../utility";
|
|
|
|
function setTooltip(container, content, flag = false, parent = null) {
|
|
const isParent = parent instanceof HTMLElement;
|
|
if (isParent) {
|
|
const tipid = container.dataset.tipId;
|
|
const tip = parent.querySelector(`.tooltip-wrapper[data-tip-id="${tipid}"]`);
|
|
tip?.remove();
|
|
} else {
|
|
const tip = container.querySelector('.tooltip-wrapper');
|
|
tip?.remove();
|
|
}
|
|
const wrapper = createElement('div', wrapper => {
|
|
wrapper.className = 'tooltip-wrapper tooltip-color';
|
|
wrapper.style.visibility = 'hidden';
|
|
wrapper.style.opacity = 0;
|
|
wrapper.style.top = '0';
|
|
wrapper.style.left = '0';
|
|
},
|
|
createElement('div', 'tooltip-pointer tooltip-color'),
|
|
createElement('div', 'tooltip-curtain tooltip-color'),
|
|
createElement('div', cnt => {
|
|
cnt.className = 'tooltip-content';
|
|
if (content instanceof Element) {
|
|
cnt.appendChild(content);
|
|
} else {
|
|
cnt.innerText = content;
|
|
}
|
|
})
|
|
);
|
|
// container.insertAdjacentElement('afterend', wrapper);
|
|
if (isParent) {
|
|
const tipId = String(Math.random()).substring(2);
|
|
container.dataset.tipId = tipId;
|
|
wrapper.dataset.tipId = tipId;
|
|
parent.appendChild(wrapper);
|
|
} else {
|
|
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 p;
|
|
let left;
|
|
let top;
|
|
left = c.offsetLeft;
|
|
top = c.offsetTop;
|
|
if (isParent) {
|
|
p = c.offsetParent;
|
|
while (p != null && p !== parent) {
|
|
left += p.offsetLeft;
|
|
top += p.offsetTop;
|
|
p = p.offsetParent;
|
|
}
|
|
}
|
|
p = c.parentElement;
|
|
const offsetParent = c.offsetParent;
|
|
while (p != null && p !== (isParent ? parent : offsetParent)) {
|
|
left -= p.scrollLeft;
|
|
top -= p.scrollTop;
|
|
p = p.parentElement;
|
|
}
|
|
left += (c.offsetWidth - wrapper.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
|
|
} |