| 1 |
(function () { |
| 2 |
function init() { |
| 3 |
document.querySelectorAll('.bkbg-tt-app').forEach(function (appEl) { |
| 4 |
if (appEl.dataset.rendered) return; |
| 5 |
appEl.dataset.rendered = '1'; |
| 6 |
|
| 7 |
var opts; |
| 8 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 9 |
var o = Object.assign({ |
| 10 |
triggerText: 'Hover over me', |
| 11 |
tooltipContent: 'This is the tooltip explanation.', |
| 12 |
position: 'top', |
| 13 |
triggerStyle: 'underline-dotted', |
| 14 |
maxWidth: 260, |
| 15 |
showArrow: true, |
| 16 |
animationType: 'fade', |
| 17 |
align: 'left', |
| 18 |
triggerSize: 16, |
| 19 |
triggerWeight: '500', |
| 20 |
tooltipSize: 13, |
| 21 |
tooltipLineHeight: 1.55, |
| 22 |
tooltipPadding: 12, |
| 23 |
tooltipRadius: 8, |
| 24 |
triggerColor: '#6366f1', |
| 25 |
underlineColor: '#6366f1', |
| 26 |
highlightBg: '#ede9fe', |
| 27 |
tooltipBg: '#1e293b', |
| 28 |
tooltipColor: '#f8fafc', |
| 29 |
}, opts); |
| 30 |
|
| 31 |
// Outer wrapper |
| 32 |
var outer = document.createElement('div'); |
| 33 |
outer.style.textAlign = o.align; |
| 34 |
|
| 35 |
// Tooltip wrapper |
| 36 |
var wrap = document.createElement('span'); |
| 37 |
wrap.className = 'bkbg-tt-wrap pos-' + o.position + ' anim-' + o.animationType; |
| 38 |
wrap.setAttribute('role', 'group'); |
| 39 |
|
| 40 |
// Trigger |
| 41 |
var trigger = document.createElement('span'); |
| 42 |
trigger.className = 'bkbg-tt-trigger style-' + o.triggerStyle; |
| 43 |
trigger.setAttribute('tabindex', '0'); |
| 44 |
trigger.setAttribute('aria-describedby', 'bkbg-tt-popup-' + Math.random().toString(36).substr(2, 6)); |
| 45 |
trigger.textContent = o.triggerText; |
| 46 |
|
| 47 |
// Apply trigger styles |
| 48 |
trigger.style.color = o.triggerColor; |
| 49 |
if (o.triggerStyle === 'underline-dotted' || o.triggerStyle === 'underline-solid' || o.triggerStyle === 'underline-dashed') { |
| 50 |
trigger.style.textDecorationColor = o.underlineColor; |
| 51 |
} |
| 52 |
if (o.triggerStyle === 'highlight') { |
| 53 |
trigger.style.background = o.highlightBg; |
| 54 |
trigger.style.borderRadius = '4px'; |
| 55 |
trigger.style.padding = '0 4px'; |
| 56 |
} |
| 57 |
|
| 58 |
// Popup |
| 59 |
var popup = document.createElement('div'); |
| 60 |
popup.className = 'bkbg-tt-popup'; |
| 61 |
popup.setAttribute('role', 'tooltip'); |
| 62 |
popup.setAttribute('id', trigger.getAttribute('aria-describedby')); |
| 63 |
popup.style.maxWidth = o.maxWidth + 'px'; |
| 64 |
popup.style.minWidth = '140px'; |
| 65 |
popup.style.background = o.tooltipBg; |
| 66 |
popup.style.color = o.tooltipColor; |
| 67 |
popup.style.padding = o.tooltipPadding + 'px'; |
| 68 |
popup.style.borderRadius = o.tooltipRadius + 'px'; |
| 69 |
popup.style.boxShadow = '0 8px 24px rgba(0,0,0,0.18)'; |
| 70 |
popup.textContent = o.tooltipContent; |
| 71 |
|
| 72 |
// Arrow |
| 73 |
if (o.showArrow) { |
| 74 |
var arrow = document.createElement('div'); |
| 75 |
arrow.className = 'bkbg-tt-arrow'; |
| 76 |
if (o.position === 'top') { |
| 77 |
arrow.style.borderTop = '6px solid ' + o.tooltipBg; |
| 78 |
} else if (o.position === 'bottom') { |
| 79 |
arrow.style.borderBottom = '6px solid ' + o.tooltipBg; |
| 80 |
} else if (o.position === 'left') { |
| 81 |
arrow.style.borderLeft = '6px solid ' + o.tooltipBg; |
| 82 |
} else if (o.position === 'right') { |
| 83 |
arrow.style.borderRight = '6px solid ' + o.tooltipBg; |
| 84 |
} |
| 85 |
popup.appendChild(arrow); |
| 86 |
} |
| 87 |
|
| 88 |
// Mobile click toggle |
| 89 |
var isOpen = false; |
| 90 |
trigger.addEventListener('click', function (e) { |
| 91 |
if (window.matchMedia('(pointer: coarse)').matches || window.innerWidth < 768) { |
| 92 |
e.preventDefault(); |
| 93 |
isOpen = !isOpen; |
| 94 |
if (isOpen) { |
| 95 |
wrap.classList.add('is-open'); |
| 96 |
} else { |
| 97 |
wrap.classList.remove('is-open'); |
| 98 |
} |
| 99 |
} |
| 100 |
}); |
| 101 |
|
| 102 |
// Close on Escape |
| 103 |
trigger.addEventListener('keydown', function (e) { |
| 104 |
if (e.key === 'Escape') { |
| 105 |
wrap.classList.remove('is-open'); |
| 106 |
isOpen = false; |
| 107 |
} |
| 108 |
if (e.key === 'Enter' || e.key === ' ') { |
| 109 |
isOpen = !isOpen; |
| 110 |
wrap.classList.toggle('is-open', isOpen); |
| 111 |
} |
| 112 |
}); |
| 113 |
|
| 114 |
// Close on outside click |
| 115 |
document.addEventListener('click', function (e) { |
| 116 |
if (!wrap.contains(e.target)) { |
| 117 |
wrap.classList.remove('is-open'); |
| 118 |
isOpen = false; |
| 119 |
} |
| 120 |
}); |
| 121 |
|
| 122 |
wrap.appendChild(trigger); |
| 123 |
wrap.appendChild(popup); |
| 124 |
outer.appendChild(wrap); |
| 125 |
|
| 126 |
appEl.parentNode.insertBefore(outer, appEl); |
| 127 |
appEl.style.display = 'none'; |
| 128 |
}); |
| 129 |
} |
| 130 |
|
| 131 |
if (document.readyState !== 'loading') { init(); } |
| 132 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 133 |
})(); |
| 134 |
|
