-
Notifications
You must be signed in to change notification settings - Fork 0
/
tooltip.js
51 lines (43 loc) · 1.66 KB
/
tooltip.js
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
class Tooltip{
/* --- Applique le système de bulle d'infos sur les éléments // @param {string} selector --- */
static bind (selector){
document.querySelectorAll(selector).forEach(function (element) {
new Tooltip(element);
});
}
// @param {HTML Element} element
constructor (element) {
this.element = element;
this.title = element.getAttribute('title');
this.tooltip = null;
this.element.addEventListener('mouseover', this.mouseOver.bind(this));
this.element.addEventListener('mouseout', this.mouseOut.bind(this));
}
mouseOver () {
let tooltip = this.createTooltip();
let width = this.tooltip.offsetWidth;
let height = this.tooltip.offsetHeight;
let left = this.element.offsetWidth / 2 - width / 2 + this.element.getBoundingClientRect().left + document.documentElement.scrollLeft;
let top = this.element.getBoundingClientRect().top - height - 7 + document.documentElement.scrollTop;
tooltip.style.left = left + "px";
tooltip.style.top = top + "px";
}
mouseOut () {
if (this.tooltip !== null)
document.body.removeChild(this.tooltip);
this.tooltip = null;
}
// Crée et injecte la bulle d'info dans l'HTML
// return {HTMLElement}
createTooltip () {
if (this.tooltip === null){
let tooltip = document.createElement('div');
tooltip.innerHTML = this.title;
tooltip.classList.add('tooltip');
document.body.appendChild(tooltip);
this.tooltip = tooltip;
}
return this.tooltip;
}
}
Tooltip.bind('input[title]');