1 | (function (window, document) {
|
2 | var elem = document.createElement('div');
|
3 |
|
4 | elem.className = 'tooltip';
|
5 |
|
6 | var Tooltip = {
|
7 | elem: elem,
|
8 | initialized: false,
|
9 | shown: false,
|
10 | x: 0,
|
11 | y: 0,
|
12 | marginX: 10,
|
13 | marginY: 30,
|
14 |
|
15 | init: function () {
|
16 | if (Tooltip.initialized) return;
|
17 |
|
18 | Tooltip.initialized = true;
|
19 | document.body.appendChild(Tooltip.elem);
|
20 | document.addEventListener('mousemove', Tooltip._mouseMoveHandler, false);
|
21 | },
|
22 |
|
23 | show: function (html) {
|
24 | Tooltip.elem.innerHTML = html;
|
25 |
|
26 | if (Tooltip.shown) return;
|
27 |
|
28 | Tooltip.shown = true;
|
29 | Tooltip.elem.style.visibility = 'visible';
|
30 | },
|
31 |
|
32 | hide: function () {
|
33 | if (!Tooltip.shown) return;
|
34 |
|
35 | Tooltip.shown = false;
|
36 | Tooltip.elem.style.visibility = 'hidden';
|
37 | },
|
38 |
|
39 | _mouseMoveHandler: function (event) {
|
40 | Tooltip.x = event.pageX;
|
41 | Tooltip.y = event.pageY;
|
42 | Tooltip._updatePosition();
|
43 | },
|
44 |
|
45 | _updatePosition: function () {
|
46 | if (Tooltip.shown) {
|
47 | Tooltip.elem.style.left = Tooltip.x + Tooltip.marginX + 'px';
|
48 | Tooltip.elem.style.top = Tooltip.y + Tooltip.marginY + 'px';
|
49 |
|
50 | var boundingRect = Tooltip.elem.getBoundingClientRect();
|
51 |
|
52 | if (boundingRect.right > window.innerWidth) {
|
53 |
|
54 | Tooltip.elem.style.left = (window.innerWidth - boundingRect.width) + 'px';
|
55 | }
|
56 |
|
57 | if (boundingRect.bottom > window.innerHeight) {
|
58 |
|
59 | Tooltip.elem.style.top = (Tooltip.y - Tooltip.marginY - boundingRect.height) + 'px';
|
60 | }
|
61 | }
|
62 | }
|
63 | };
|
64 |
|
65 | window.Tooltip = Tooltip;
|
66 | })(this, document);
|