| 1 |
function pagelayer_tlite(getTooltipOpts) { |
| 2 |
document.addEventListener('mouseover', function (e) { |
| 3 |
var el = e.target; |
| 4 |
var opts = getTooltipOpts(el); |
| 5 |
|
| 6 |
if (!opts) { |
| 7 |
el = el.parentElement; |
| 8 |
opts = el && getTooltipOpts(el); |
| 9 |
} |
| 10 |
|
| 11 |
opts && pagelayer_tlite.show(el, opts, true); |
| 12 |
}); |
| 13 |
} |
| 14 |
|
| 15 |
pagelayer_tlite.show = function (el, opts, isAuto) { |
| 16 |
var fallbackAttrib = 'data-tlite'; |
| 17 |
opts = opts || {}; |
| 18 |
|
| 19 |
(el.tooltip || Tooltip(el, opts)).show(); |
| 20 |
|
| 21 |
function Tooltip(el, opts) { |
| 22 |
var tooltipEl; |
| 23 |
var showTimer; |
| 24 |
var text; |
| 25 |
|
| 26 |
el.addEventListener('mousedown', autoHide); |
| 27 |
el.addEventListener('mouseleave', autoHide); |
| 28 |
|
| 29 |
function show() { |
| 30 |
text = el.title || el.getAttribute(fallbackAttrib) || text; |
| 31 |
el.title = ''; |
| 32 |
el.setAttribute(fallbackAttrib, ''); |
| 33 |
text && !showTimer && (showTimer = setTimeout(fadeIn, isAuto ? 150 : 1)) |
| 34 |
} |
| 35 |
|
| 36 |
function autoHide() { |
| 37 |
pagelayer_tlite.hide(el, true); |
| 38 |
} |
| 39 |
|
| 40 |
function hide(isAutoHiding) { |
| 41 |
if (isAuto === isAutoHiding) { |
| 42 |
showTimer = clearTimeout(showTimer); |
| 43 |
var parent = tooltipEl && tooltipEl.parentNode; |
| 44 |
parent && parent.removeChild(tooltipEl); |
| 45 |
tooltipEl = undefined; |
| 46 |
} |
| 47 |
} |
| 48 |
|
| 49 |
function fadeIn() { |
| 50 |
if (!tooltipEl) { |
| 51 |
tooltipEl = createTooltip(el, text, opts); |
| 52 |
} |
| 53 |
} |
| 54 |
|
| 55 |
return el.tooltip = { |
| 56 |
show: show, |
| 57 |
hide: hide |
| 58 |
}; |
| 59 |
} |
| 60 |
|
| 61 |
function createTooltip(el, text, opts) { |
| 62 |
var tooltipEl = document.createElement('span'); |
| 63 |
var grav = opts.grav || el.getAttribute('data-tlite') || 'n'; |
| 64 |
|
| 65 |
tooltipEl.innerHTML = text; |
| 66 |
|
| 67 |
el.appendChild(tooltipEl); |
| 68 |
|
| 69 |
var vertGrav = grav[0] || ''; |
| 70 |
var horzGrav = grav[1] || ''; |
| 71 |
|
| 72 |
var windowInnerWidth = window.parent.innerWidth - 15; |
| 73 |
var windowInnerHeight = window.parent.innerHeight; |
| 74 |
|
| 75 |
function positionTooltip() { |
| 76 |
tooltipEl.className = 'pagelayer-tlite ' + 'pagelayer-tlite-' + vertGrav + horzGrav; |
| 77 |
|
| 78 |
var arrowSize = 10; |
| 79 |
var top = el.offsetTop; |
| 80 |
var left = el.offsetLeft; |
| 81 |
|
| 82 |
if (tooltipEl.offsetParent === el) { |
| 83 |
top = left = 0; |
| 84 |
} |
| 85 |
|
| 86 |
var width = el.offsetWidth; |
| 87 |
var height = el.offsetHeight; |
| 88 |
var tooltipHeight = tooltipEl.offsetHeight; |
| 89 |
var tooltipWidth = tooltipEl.offsetWidth; |
| 90 |
var centerEl = left + (width / 2); |
| 91 |
|
| 92 |
tooltipEl.style.top = ( |
| 93 |
vertGrav === 's' ? (top - tooltipHeight - arrowSize) : |
| 94 |
vertGrav === 'n' ? (top + height + arrowSize) : |
| 95 |
(top + (height / 2) - (tooltipHeight / 2)) |
| 96 |
) + 'px'; |
| 97 |
|
| 98 |
tooltipEl.style.left = ( |
| 99 |
horzGrav === 'w' ? left : |
| 100 |
horzGrav === 'e' ? left + width - tooltipWidth : |
| 101 |
vertGrav === 'w' ? (left + width + arrowSize) : |
| 102 |
vertGrav === 'e' ? (left - tooltipWidth - arrowSize) : |
| 103 |
(centerEl - tooltipWidth / 2) |
| 104 |
) + 'px'; |
| 105 |
} |
| 106 |
|
| 107 |
positionTooltip(); |
| 108 |
|
| 109 |
var rect = tooltipEl.getBoundingClientRect(); |
| 110 |
|
| 111 |
if (vertGrav === 's' && rect.top < 0) { |
| 112 |
vertGrav = 'n'; |
| 113 |
positionTooltip(); |
| 114 |
} else if (vertGrav === 'n' && rect.bottom > windowInnerHeight) { |
| 115 |
vertGrav = 's'; |
| 116 |
positionTooltip(); |
| 117 |
} else if (vertGrav === 'e' && rect.left < 0) { |
| 118 |
vertGrav = 'w'; |
| 119 |
positionTooltip(); |
| 120 |
} else if (vertGrav === 'w' && rect.right > windowInnerWidth) { |
| 121 |
vertGrav = 'e'; |
| 122 |
positionTooltip(); |
| 123 |
} |
| 124 |
|
| 125 |
positionTooltip(); |
| 126 |
|
| 127 |
// Additional handling |
| 128 |
if(rect.left < 0) { |
| 129 |
horzGrav = 'w'; |
| 130 |
positionTooltip(); |
| 131 |
} else if (rect.right > windowInnerWidth) { |
| 132 |
horzGrav = 'e'; |
| 133 |
positionTooltip(); |
| 134 |
} |
| 135 |
|
| 136 |
tooltipEl.className += ' pagelayer-tlite-visible'; |
| 137 |
|
| 138 |
return tooltipEl; |
| 139 |
} |
| 140 |
}; |
| 141 |
|
| 142 |
pagelayer_tlite.hide = function (el, isAuto) { |
| 143 |
el.tooltip && el.tooltip.hide(isAuto); |
| 144 |
}; |
| 145 |
|
| 146 |
if (typeof module !== 'undefined' && module.exports) { |
| 147 |
module.exports = tlite; |
| 148 |
} |
| 149 |
|
