| 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);
|