blob: 9fa4aa87de42779f4ef60a9749d8dfe8fb30654e (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
const tooltip = (element: HTMLElement) => {
let div: HTMLDivElement;
let title: string | null;
const offset = 10;
let timer: number;
const above = element.getAttribute('data-tooltip-above') !== null;
const mouseOver = (event: MouseEvent) => {
title = element.getAttribute('title');
element.removeAttribute('title');
timer = window.setTimeout(() => {
div = document.createElement('div');
div.textContent = title;
div.setAttribute(
'style',
`position: absolute;
top: -${event.pageX - div.offsetWidth / 2}px;
left: -${event.pageY - div.offsetHeight - offset / 2}px;`
);
div.classList.add('card');
div.classList.add('card-small');
document.body.appendChild(div);
}, 0);
};
const mouseMove = (event: MouseEvent) => {
if (div) {
div.style.left = `${
above && event.pageX - div.offsetWidth / 2 > 0
? event.pageX - div.offsetWidth / 2
: event.pageX + offset
}px`;
div.style.top = `${event.pageY - div.offsetHeight - offset / 2}px`;
}
};
const mouseLeave = () => {
clearTimeout(timer);
if (div) {
document.body.removeChild(div);
element.setAttribute('title', title as string);
}
};
element.addEventListener('mouseover', mouseOver);
element.addEventListener('mouseleave', mouseLeave);
element.addEventListener('mousemove', mouseMove);
return {
destroy() {
element.removeEventListener('mouseover', mouseOver);
element.removeEventListener('mouseleave', mouseLeave);
element.removeEventListener('mousemove', mouseMove);
}
};
};
export default tooltip;
|