rev |
line source |
paulo@81
|
1 // Based on http://matthias-schuetz.js.org/tooltip.js/
|
paulo@81
|
2
|
paulo@81
|
3 var _tt_options = {
|
paulo@81
|
4 tooltipId: "tooltip",
|
paulo@81
|
5 offsetDefault: 15
|
paulo@81
|
6 };
|
paulo@81
|
7
|
paulo@81
|
8 function getTooltipElm() {
|
paulo@81
|
9 return document.querySelector("#" + _tt_options.tooltipId);
|
paulo@81
|
10 }
|
paulo@81
|
11
|
paulo@86
|
12 function adjustTooltip(evt, tooltipElm, title, text, subtext) {
|
paulo@81
|
13 var offset = _tt_options.offsetDefault;
|
paulo@81
|
14 var scrollY = window.scrollY || window.pageYOffset;
|
paulo@81
|
15 var scrollX = window.scrollX || window.pageXOffset;
|
paulo@81
|
16 var tooltipTop = evt.pageY + offset;
|
paulo@81
|
17 var tooltipLeft = evt.pageX + offset;
|
paulo@81
|
18
|
paulo@81
|
19 tooltipTop = (tooltipTop - scrollY + tooltipElm.offsetHeight + 20 >= window.innerHeight ? (tooltipTop - tooltipElm.offsetHeight - 20) : tooltipTop);
|
paulo@81
|
20 tooltipLeft = (tooltipLeft - scrollX + tooltipElm.offsetWidth + 20 >= window.innerWidth ? (tooltipLeft - tooltipElm.offsetWidth - 20) : tooltipLeft);
|
paulo@81
|
21
|
paulo@81
|
22 tooltipElm.style.top = tooltipTop + "px";
|
paulo@81
|
23 tooltipElm.style.left = tooltipLeft + "px";
|
paulo@81
|
24
|
paulo@86
|
25 setTooltipText(tooltipElm, title, text, subtext);
|
paulo@81
|
26 }
|
paulo@81
|
27
|
paulo@81
|
28 function removeTooltip() {
|
paulo@81
|
29 document.querySelector("body").removeChild(getTooltipElm());
|
paulo@81
|
30 }
|
paulo@81
|
31
|
paulo@86
|
32 function createTooltip(evt, title, text, subtext) {
|
paulo@81
|
33 var tooltipElm = getTooltipElm();
|
paulo@81
|
34
|
paulo@81
|
35 if (!tooltipElm) {
|
paulo@81
|
36 tooltipElm = document.createElement("div");
|
paulo@81
|
37 tooltipElm.appendChild(document.createElement("h1"));
|
paulo@81
|
38 tooltipElm.appendChild(document.createElement("h2"));
|
paulo@86
|
39 tooltipElm.appendChild(document.createElement("h3"));
|
paulo@81
|
40
|
paulo@86
|
41 tooltipElm.style.position = "absolute"; tooltipElm.setAttribute("id", _tt_options.tooltipId);
|
paulo@81
|
42
|
paulo@81
|
43 document.querySelector("body").appendChild(tooltipElm);
|
paulo@81
|
44 }
|
paulo@81
|
45
|
paulo@86
|
46 adjustTooltip(evt, tooltipElm, title, text, subtext);
|
paulo@81
|
47 }
|
paulo@81
|
48
|
paulo@86
|
49 function setTooltipText(tooltipElm, title, text, subtext) {
|
paulo@81
|
50 var eTitle = tooltipElm.children[0];
|
paulo@81
|
51 var eText = tooltipElm.children[1];
|
paulo@86
|
52 var eSubText = tooltipElm.children[2];
|
paulo@81
|
53 if (eTitle && title) {
|
paulo@81
|
54 eTitle.textContent = title;
|
paulo@81
|
55 }
|
paulo@81
|
56 if (eText && text) {
|
paulo@81
|
57 eText.textContent = text;
|
paulo@81
|
58 }
|
paulo@86
|
59 if (eSubText) {
|
paulo@86
|
60 eSubText.textContent = subtext;
|
paulo@86
|
61 }
|
paulo@81
|
62 }
|