| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| // Tooltip functionality | |
| const tooltipTriggers = document.querySelectorAll('[data-tooltip]'); | |
| tooltipTriggers.forEach(trigger => { | |
| trigger.addEventListener('mouseenter', showTooltip); | |
| trigger.addEventListener('mouseleave', hideTooltip); | |
| }); | |
| function showTooltip(e) { | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded shadow-lg'; | |
| tooltip.textContent = e.target.dataset.tooltip; | |
| document.body.appendChild(tooltip); | |
| const rect = e.target.getBoundingClientRect(); | |
| tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`; | |
| tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; | |
| e.target.dataset.tooltipId = tooltip; | |
| } | |
| function hideTooltip(e) { | |
| if (e.target.dataset.tooltipId) { | |
| e.target.dataset.tooltipId.remove(); | |
| } | |
| } | |
| }); |