From bc62f616aba608c503fb61d7d6eae893b000ea1e Mon Sep 17 00:00:00 2001 From: Anson Biggs Date: Wed, 13 Aug 2025 12:09:21 -0600 Subject: [PATCH] Replace browser tooltips with custom CSS hover tooltips MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add info icons (ℹ️) to hero statistics as visual indicators - Create custom CSS tooltips with smooth animations and proper styling - Remove ugly browser default tooltips in favor of professional design - Tooltips show source attribution on hover with dark styling and arrows - Improves UX with clear visual cues and better tooltip appearance --- index.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 58 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 69225b7..481c4d6 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,55 @@ .print-only { display: block !important; } } .print-only { display: none; } + + /* Custom tooltip styles */ + .tooltip { + position: relative; + } + + .tooltip::after { + content: "ℹ️"; + position: absolute; + top: 0.5rem; + right: 0.5rem; + font-size: 0.75rem; + opacity: 0.7; + } + + .tooltip .tooltip-text { + visibility: hidden; + width: 280px; + background-color: rgba(0, 0, 0, 0.9); + color: white; + text-align: center; + border-radius: 6px; + padding: 8px 12px; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -140px; + opacity: 0; + transition: opacity 0.3s; + font-size: 0.75rem; + line-height: 1.3; + } + + .tooltip .tooltip-text::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; + } + + .tooltip:hover .tooltip-text { + visibility: visible; + opacity: 1; + } @@ -58,20 +107,20 @@

-
-
$1.81T
+
+
$1.81 Trillion
Total U.S. Student Debt
-
Education Data Initiative, 2025
+ Source: Education Data Initiative, Q2 2025 student loan debt statistics
-
-
42.5M
+
+
42,500,000
Americans with Student Loans
-
Education Data Initiative, 2025
+ Source: Education Data Initiative, 2025 federal student loan borrower data
-
-
$39K
+
+
$39,000
Average Federal Debt per Borrower
-
Education Data Initiative, 2025
+ Source: Education Data Initiative, 2025 average federal student loan debt per borrower