| document.addEventListener('DOMContentLoaded', () => { | |
| // Initialize tooltips | |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); | |
| tooltipElements.forEach(el => { | |
| const tooltipText = el.getAttribute('data-tooltip'); | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'hidden bg-gray-800 text-white text-xs rounded py-1 px-2 absolute z-10'; | |
| tooltip.textContent = tooltipText; | |
| el.appendChild(tooltip); | |
| el.addEventListener('mouseenter', () => { | |
| tooltip.classList.remove('hidden'); | |
| tooltip.classList.add('block'); | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| tooltip.classList.remove('block'); | |
| tooltip.classList.add('hidden'); | |
| }); | |
| }); | |
| // Demo mode toggle | |
| const demoBtn = document.querySelector('#demo-btn'); | |
| if (demoBtn) { | |
| demoBtn.addEventListener('click', () => { | |
| document.body.classList.toggle('demo-mode'); | |
| }); | |
| } | |
| }); |