vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: tooltips ease in — a short hover delay, then a quick fade that rises and grows from the anchor on the independent translate/scale properties (so the inline placement transform stays put); reduced motion keeps just the fade

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-19 21:27:04 +00:00
parent e2ed493bdd
commit e9ebc3fee6
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.css
View File

@@ -6170,6 +6170,25 @@ body.has-player .chat-fab {
pointer-events: none;
z-index: var(--z-toast);
box-shadow: var(--shadow-2);
/* The inline `transform` places it above the anchor, so the entrance rides
on the independent `translate`/`scale` properties, which compose with it.
A short delay keeps it from flashing while the pointer sweeps across. */
transform-origin: 50% 100%;
animation: tooltip-in 160ms cubic-bezier(0.2, 0.7, 0.3, 1) 120ms both;
}
@keyframes tooltip-in {
from { opacity: 0; translate: 0 4px; scale: 0.96; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
.tooltip {
animation-name: tooltip-fade;
}
@keyframes tooltip-fade {
from { opacity: 0; }
}
}
/* ── Search bar (in header center slot) ── */