| 757 | } |
| 758 | |
| 759 | function showTooltip(button, tooltip) { |
| 760 | // Get button position relative to viewport |
| 761 | const buttonRect = button.getBoundingClientRect(); |
| 762 | |
| 763 | // Make tooltip visible but transparent to measure it |
| 764 | tooltip.style.visibility = 'visible'; |
| 765 | tooltip.style.opacity = '0'; |
| 766 | |
| 767 | // Now get tooltip dimensions |
| 768 | const tooltipRect = tooltip.getBoundingClientRect(); |
| 769 | |
| 770 | // Calculate tooltip position |
| 771 | const buttonCenterX = buttonRect.left + buttonRect.width / 2; |
| 772 | const tooltipTop = buttonRect.top - tooltipRect.height - 8; // 8px gap above button |
| 773 | |
| 774 | // Position tooltip centered above the button |
| 775 | let tooltipLeft = buttonCenterX - tooltipRect.width / 2; |
| 776 | |
| 777 | // Ensure tooltip doesn't go off-screen horizontally |
| 778 | const padding = 10; |
| 779 | if (tooltipLeft < padding) { |
| 780 | tooltipLeft = padding; |
| 781 | } else if (tooltipLeft + tooltipRect.width > window.innerWidth - padding) { |
| 782 | tooltipLeft = window.innerWidth - tooltipRect.width - padding; |
| 783 | } |
| 784 | |
| 785 | // Position tooltip |
| 786 | tooltip.style.left = `${tooltipLeft}px`; |
| 787 | tooltip.style.top = `${tooltipTop}px`; |
| 788 | |
| 789 | // Show tooltip with fade-in |
| 790 | tooltip.style.opacity = '1'; |
| 791 | } |
| 792 | |
| 793 | function hideTooltip(tooltip) { |
| 794 | tooltip.style.visibility = 'hidden'; |