Anson/secure-act-2.0
1
0
Fork 0
mirror of https://gitlab.com/MisterBiggs/secure-act-2.0.git synced 2025-08-18 00:34:43 +00:00
Code Releases Activity

Replace browser tooltips with custom CSS hover tooltips

Browse Source 
- 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
This commit is contained in:
Anson Biggs
2025-08-13 12:09:21 -06:00
parent bfc85ee14b
commit bc62f616ab
1 changed files with 58 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@@ -35,6 +35,55 @@
.print-only { display: block !important; } .print-only { display: block !important; }
} }
.print-only { display: none; } .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;
}
</style> </style>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
@@ -58,20 +107,20 @@
</p> </p>
</div> </div>
<div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-center"> <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-center">
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
<div class="text-3xl font-bold">$1.81T</div> <div class="text-3xl font-bold">$1.81 Trillion</div>
<div class="text-sm opacity-90">Total U.S. Student Debt</div> <div class="text-sm opacity-90">Total U.S. Student Debt</div>
<div class="text-xs opacity-75 mt-1">Education Data Initiative, 2025</div> <span class="tooltip-text">Source: Education Data Initiative, Q2 2025 student loan debt statistics</span>
</div> </div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
<div class="text-3xl font-bold">42.5M</div> <div class="text-3xl font-bold">42,500,000</div>
<div class="text-sm opacity-90">Americans with Student Loans</div> <div class="text-sm opacity-90">Americans with Student Loans</div>
<div class="text-xs opacity-75 mt-1">Education Data Initiative, 2025</div> <span class="tooltip-text">Source: Education Data Initiative, 2025 federal student loan borrower data</span>
</div> </div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
<div class="text-3xl font-bold">$39K</div> <div class="text-3xl font-bold">$39,000</div>
<div class="text-sm opacity-90">Average Federal Debt per Borrower</div> <div class="text-sm opacity-90">Average Federal Debt per Borrower</div>
<div class="text-xs opacity-75 mt-1">Education Data Initiative, 2025</div> <span class="tooltip-text">Source: Education Data Initiative, 2025 average federal student loan debt per borrower</span>
</div> </div>
</div> </div>
</div> </div>