Skip to content

Commit 1bc45fe

Browse files
quicklywilliamquicklywilliam
committed
tools tips for the tabs
1 parent d61d263 commit 1bc45fe

File tree

3 files changed

+85
-16
lines changed

3 files changed

+85
-16
lines changed

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Used EV Price Tracker</title>
6+
<title>Used EV Market Tracker</title>
77
<meta name="description" content="Compare used electric vehicle prices from multiple dealers and track changes over time. Find the best deals on EVs including Tesla, Hyundai Ioniq, Kia EV6, and more." />
88

99
<!-- Open Graph / Facebook -->
1010
<meta property="og:type" content="website" />
1111
<meta property="og:url" content="https://quicklywilliam.github.io/usedevpricetracker/" />
12-
<meta property="og:title" content="Used EV Price Tracker" />
12+
<meta property="og:title" content="Used EV Market Tracker" />
1313
<meta property="og:description" content="Compare used electric vehicle prices from multiple dealers and track changes over time. Find the best deals on EVs including Tesla, Hyundai Ioniq, Kia EV6, and more." />
1414
<meta property="og:image" content="https://quicklywilliam.github.io/usedevpricetracker/social-preview.png" />
1515
<meta property="og:image:width" content="1200" />
@@ -18,7 +18,7 @@
1818
<!-- Twitter -->
1919
<meta property="twitter:card" content="summary_large_image" />
2020
<meta property="twitter:url" content="https://quicklywilliam.github.io/usedevpricetracker/" />
21-
<meta property="twitter:title" content="Used EV Price Tracker" />
21+
<meta property="twitter:title" content="Used EV Markert Tracker" />
2222
<meta property="twitter:description" content="Compare used electric vehicle prices from multiple dealers and track changes over time. Find the best deals on EVs." />
2323
<meta property="twitter:image" content="https://quicklywilliam.github.io/usedevpricetracker/social-preview.png" />
2424
</head>

‎src/App.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@ function App() {
457457
<header>
458458
<div className="header-content">
459459
<div>
460-
<h1>Used EV Tracker</h1>
460+
<h1>Used EV Market Tracker</h1>
461461
</div>
462462
<NoTeslaToggle enabled={noTesla} onChange={handleNoTeslaToggle} />
463463
</div>
@@ -471,14 +471,13 @@ function App() {
471471
className={`category-tab${tab.id === selectedCategory ? ' active' : ''}`}
472472
onClick={() => handleCategorySelect(tab.id)}
473473
aria-pressed={tab.id === selectedCategory}
474+
data-description={tab.description}
475+
title={tab.description}
474476
>
475477
{tab.label}
476478
</button>
477479
))}
478480
</div>
479-
{categoryDescription && (
480-
<p className="category-helper">{categoryDescription}</p>
481-
)}
482481
</div>
483482
)}
484483
</header>

‎src/index.css‎

Lines changed: 79 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -164,13 +164,14 @@ header p {
164164

165165
.category-filter {
166166
margin-top: 1rem;
167+
margin-bottom: -4px;
167168
padding: 0;
168169
}
169170

170171
.category-tabs {
171172
display: flex;
172173
flex-wrap: wrap;
173-
gap: 0.25rem;
174+
gap: 0.35rem;
174175
position: relative;
175176
}
176177

@@ -201,6 +202,83 @@ header p {
201202
z-index: 1;
202203
}
203204

205+
/* Desktop: show tooltip on hover */
206+
@media (hover: hover) {
207+
.category-tab::after {
208+
content: attr(data-description);
209+
position: absolute;
210+
bottom: calc(100% + 8px);
211+
left: 0;
212+
background: rgba(0, 0, 0, 0.9);
213+
color: white;
214+
padding: 0.5rem 0.75rem;
215+
border-radius: 6px;
216+
font-size: 0.85rem;
217+
font-weight: 400;
218+
font-style: italic;
219+
white-space: nowrap;
220+
opacity: 0;
221+
pointer-events: none;
222+
transition: opacity 0.2s ease;
223+
z-index: 100;
224+
}
225+
226+
.category-tab:last-child::after {
227+
left: auto;
228+
right: 0;
229+
}
230+
231+
.category-tab:hover::after,
232+
.category-tab:focus-visible::after {
233+
opacity: 1;
234+
}
235+
}
236+
237+
/* Mobile: flash description on select */
238+
@media (hover: none) {
239+
.category-tab.active::before {
240+
content: attr(data-description);
241+
position: absolute;
242+
bottom: calc(100% + 8px);
243+
left: 0;
244+
background: rgba(0, 0, 0, 0.9);
245+
color: white;
246+
padding: 0.5rem 0.75rem;
247+
border-radius: 6px;
248+
font-size: 0.85rem;
249+
font-weight: 400;
250+
font-style: italic;
251+
white-space: nowrap;
252+
z-index: 100;
253+
animation: flashDescription 2s ease-in-out;
254+
pointer-events: none;
255+
}
256+
257+
.category-tab.active:last-child::before {
258+
left: auto;
259+
right: 0;
260+
}
261+
}
262+
263+
@keyframes flashDescription {
264+
0% {
265+
opacity: 0;
266+
transform: translateY(5px);
267+
}
268+
10% {
269+
opacity: 1;
270+
transform: translateY(0);
271+
}
272+
90% {
273+
opacity: 1;
274+
transform: translateY(0);
275+
}
276+
100% {
277+
opacity: 0;
278+
transform: translateY(-5px);
279+
}
280+
}
281+
204282
.category-tab:hover,
205283
.category-tab:focus-visible {
206284
background: rgba(255, 255, 255, 0.2);
@@ -216,14 +294,6 @@ header p {
216294
z-index: 2;
217295
}
218296

219-
.category-helper {
220-
font-style: italic;
221-
margin-top: 0.5rem;
222-
padding-top: 0.4rem;
223-
font-size: 0.95rem;
224-
color: rgba(255, 255, 255, 0.85);
225-
}
226-
227297
@media (max-width: 1024px) {
228298
header {
229299
padding: 2rem 1.75rem;

0 commit comments

Comments
 (0)