| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | |
| | const tooltipTriggers = document.querySelectorAll('[data-tooltip]'); |
| | |
| | tooltipTriggers.forEach(trigger => { |
| | trigger.addEventListener('mouseenter', showTooltip); |
| | trigger.addEventListener('mouseleave', hideTooltip); |
| | }); |
| |
|
| | |
| | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| | anchor.addEventListener('click', function (e) { |
| | e.preventDefault(); |
| | document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| | behavior: 'smooth' |
| | }); |
| | }); |
| | }); |
| | }); |
| |
|
| | function showTooltip(e) { |
| | const tooltipText = this.getAttribute('data-tooltip'); |
| | const tooltip = document.createElement('div'); |
| | tooltip.className = 'absolute bg-gray-800 text-white text-sm px-2 py-1 rounded whitespace-nowrap z-50'; |
| | tooltip.textContent = tooltipText; |
| | |
| | document.body.appendChild(tooltip); |
| | |
| | const rect = this.getBoundingClientRect(); |
| | tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`; |
| | tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; |
| | |
| | this.tooltip = tooltip; |
| | } |
| |
|
| | function hideTooltip() { |
| | if (this.tooltip) { |
| | this.tooltip.remove(); |
| | } |
| | } |
| |
|
| | |
| | function navigateToModule(moduleId) { |
| | |
| | alert(`Navigating to ${moduleId} - in a complete app this would load the module content`); |
| | } |