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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
KB.tooltip = function () {
function onMouseOver(event) {
if (! exists()) {
create(event.target);
}
}
function onMouseLeaveContainer() {
setTimeout(destroy, 500);
}
function mouseLeftParent() {
setTimeout(destroyIfNotOnTooltip, 500);
}
function mouseOnTooltip() {
document.getElementById("tooltip-container").mouseOnTooltip = true;
}
function destroyIfNotOnTooltip() {
var div = document.getElementById("tooltip-container");
if(div != null && !div.mouseOnTooltip) destroy();
}
function create(element) {
var contentElement = element.querySelector("script");
if (contentElement) {
render(element, contentElement.innerHTML);
return;
}
var link = element.dataset.href;
if (link) {
fetch(link, function (html) {
if (html) {
render(element, html);
}
});
}
}
function fetch(url, callback) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.onreadystatechange = function () {
if (request.readyState === XMLHttpRequest.DONE) {
if (request.status === 200) {
callback(request.responseText);
}
}
};
request.send(null);
}
function render(element, html) {
var containerElement = document.createElement("div");
containerElement.id = "tooltip-container";
containerElement.innerHTML = html;
containerElement.addEventListener("mouseleave", onMouseLeaveContainer, false);
containerElement.addEventListener("mouseenter", mouseOnTooltip, false);
containerElement.mouseOnTooltip = false;
var elementRect = element.getBoundingClientRect();
var top = elementRect.top + window.scrollY + elementRect.height;
containerElement.style.top = top + "px";
if (elementRect.left > (window.innerWidth - 600)) {
var right = window.innerWidth - elementRect.right - window.scrollX;
containerElement.style.right = right + "px";
} else {
var left = elementRect.left + window.scrollX;
containerElement.style.left = left + "px";
}
document.body.appendChild(containerElement);
document.body.onclick = function(event) {
if (! containerElement.contains(event.target)) {
destroy();
}
};
}
function destroy() {
var element = document.getElementById("tooltip-container");
if (element) {
element.parentNode.removeChild(element);
}
}
function exists() {
return !!document.getElementById("tooltip-container");
}
var elements = document.querySelectorAll(".tooltip");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("mouseenter", onMouseOver, false);
elements[i].addEventListener("mouseleave", mouseLeftParent, false);
}
};
|
