137 lines
4.7 KiB
JavaScript
137 lines
4.7 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(`.ui-tooltip-wrapper[data-tip-id="${tipid}"]`);
|
|
tip?.remove();
|
|
} else {
|
|
const tip = container.querySelector('.ui-tooltip-wrapper');
|
|
tip?.remove();
|
|
}
|
|
const wrapper = createElement('div', wrapper => {
|
|
wrapper.className = 'ui-tooltip-wrapper ui-tooltip-color';
|
|
wrapper.style.visibility = 'hidden';
|
|
wrapper.style.opacity = 0;
|
|
wrapper.style.top = '0';
|
|
wrapper.style.left = '0';
|
|
},
|
|
createElement('div', 'ui-tooltip-pointer ui-tooltip-color'),
|
|
createElement('div', 'ui-tooltip-curtain ui-tooltip-color'),
|
|
createElement('div', cnt => {
|
|
cnt.className = 'ui-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 = isParent ? parent : c.offsetParent;
|
|
while (p != null && p !== offsetParent) {
|
|
left -= p.scrollLeft;
|
|
top -= p.scrollTop;
|
|
p = p.parentElement;
|
|
}
|
|
// check overflow
|
|
let t = c.offsetTop;
|
|
let l = c.offsetLeft;
|
|
let lastWidth = c.offsetWidth;
|
|
p = c.offsetParent;
|
|
while (p != null) {
|
|
const overflow = window.getComputedStyle(p).overflow;
|
|
if (overflow !== 'visible') {
|
|
break;
|
|
}
|
|
t += p.offsetTop;
|
|
l += p.offsetLeft;
|
|
lastWidth = p.offsetWidth;
|
|
p = p.offsetParent;
|
|
}
|
|
const offsetHeight = wrapper.offsetHeight + 14;
|
|
if (t + top - offsetHeight < 0) {
|
|
top += c.parentElement.offsetHeight + 10;
|
|
wrapper.classList.add('ui-tooltip-down');
|
|
} else {
|
|
top -= offsetHeight;
|
|
wrapper.classList.remove('ui-tooltip-down');
|
|
}
|
|
const offsetWidth = wrapper.offsetWidth;
|
|
left += (c.offsetWidth - offsetWidth) / 2;
|
|
if (left < -l) {
|
|
left = 2;
|
|
} else if (left + offsetWidth + 2 > lastWidth) {
|
|
left = lastWidth - offsetWidth - 2;
|
|
}
|
|
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
|
|
} |