blob: bba4be11e5c04134a5496aa18c7a38e6423e94de (
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
64
65
66
67
68
|
const tooltip = (element: HTMLElement) => {
let div: HTMLDivElement;
let title: string | null;
const offset = 10;
const above = element.getAttribute('data-tooltip-above') !== null;
const disable = element.getAttribute('data-tooltip-disable');
if (disable && disable === 'false')
return {
destroy() {
return;
}
};
const mouseEnter = (event: MouseEvent) => {
title = element.getAttribute('title');
element.removeAttribute('title');
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;
z-index: 999999999999;`
);
div.classList.add('card');
div.classList.add('card-small');
document.body.appendChild(div);
};
const mouseMove = (event: MouseEvent) => {
if (div) {
div.style.left = `${
above ||
event.pageX - div.offsetWidth / 2 > 0 ||
event.pageX + div.offsetWidth / 2 > window.innerWidth
? event.pageX - div.offsetWidth / 2
: event.pageX + offset
}px`;
div.style.top = `${event.pageY - div.offsetHeight - offset / 2}px`;
}
};
const mouseLeave = () => {
if (div) {
document.body.removeChild(div);
element.setAttribute('title', title as string);
}
};
element.addEventListener('mouseenter', mouseEnter);
element.addEventListener('mouseleave', mouseLeave);
element.addEventListener('mousemove', mouseMove);
return {
destroy() {
element.removeEventListener('mouseenter', mouseEnter);
element.removeEventListener('mouseleave', mouseLeave);
element.removeEventListener('mousemove', mouseMove);
}
};
};
export default tooltip;
|