Tooltip

Ajutor scurt la hover sau focus, pe fundal de brand. Bula e ascunsă până atunci, iar latura e o clasă — .top implicit, .bottom, .left, .right, cu .start / .end pe sus și jos — nu left / top scrise de mână. Momentul în care explici ceva e un moment bun de brand, și tooltipul îl poartă, cu contrastul declarat mai jos.

Markup canonic · `components/tooltip.json`

sursa = JSON · generat de scripts/build-catalog.py · treci cu mouse-ul sau apasă Tab

Interactiv · hover și focus

Ca în preview-ul shadcn: nimic la repaus, bula apare după 120ms de hover și imediat la focus (Tab). Cele patru laturi, pe declanșatoare reale — un buton cu text și trei iconuri.

.tooltip-wrap:hover · :focus-within — 120ms la hover, 0 la focus

Pe iconuri, tooltipul nu înlocuiește aria-label-ul butonului — îl completează. Declanșatorul poartă aria-describedby spre bulă; bula are role="tooltip" și rămâne în DOM (doar opacity: 0), deci cititorul de ecran o citește și fără hover. Fără title — ar dubla bula cu tooltipul nativ.

Toate pozițiile · patru laturi, trei alinieri

Aceeași geometrie ca side / align din shadcn (Radix): .top · .bottom · .left · .right, iar pe sus și jos .start / .end lipesc bula de marginea declanșatorului — pentru butoane la marginea viewportului, unde bula centrată ar ieși din ecran. Mai jos bulele sunt ținute deschise cu .tooltip-wrap.is-open.

.top.start

.top (implicit)

.top.end

.left

8px aer între declanșator și bulă pe toate laturile. Săgeata la mijlocul muchiei, sau la 16px pe .start / .end.

.right

.bottom.start

.bottom

.bottom.end

Clasă	Unde stă bula	Săgeata	Când
`.top`	deasupra, centrată, 8px aer	mijlocul muchiei de jos	implicit — de regulă e loc sus
`.bottom`	sub declanșator, centrată	mijlocul muchiei de sus	sus nu e loc: primul rând al unei liste, un buton din header
`.left`	la stânga, centrată vertical	mijlocul muchiei din dreapta	iconuri lipite de marginea dreaptă a ecranului
`.right`	la dreapta, centrată vertical	mijlocul muchiei din stânga	iconuri într-o coloană din stânga — perechea scrisă de mână a etichetei din rail
`.top.start` · `.bottom.start`	lipită de marginea stângă a declanșatorului	la 16px de stânga	declanșatorul e lângă marginea stângă a viewportului
`.top.end` · `.bottom.end`	lipită de marginea dreaptă	la 16px de dreapta	declanșatorul e lângă marginea dreaptă

Fără detecție de coliziune în CSS — alegi latura care are loc pe ecranul tău. Un consumator cu JS poate schimba clasa la deschidere, dacă măsoară că bula ar ieși din viewport.

Stări

Stare	Ce se vede	Cum
repaus	nimic — `opacity: 0`, bula rămâne în DOM	implicit
hover	bula, după 120ms — ca eticheta din rail	`.tooltip-wrap:hover`
focus	bula, imediat	`.tooltip-wrap:focus-within`
deschisă	bula, permanent	`.tooltip-wrap.is-open` — documentație, teste, JS (Escape o închide scoțând clasa)

Contrastul, declarat

Fundalul e --c-accent. Alb pe el dă 3.67:1 — sub AA la 13px (textul mare începe la 18.66px bold, deci excepția nu se aplică). Decizie luată în cunoștință de cauză la 2026-08-27: momentul în care explici ceva e un moment de brand, și tooltipul poartă pinkul. Nu e o scăpare — dacă apare într-un audit, ăsta e răspunsul. Alternativa măsurată, dacă se răzgândește cineva: --c-accent-deep, 5.39:1.

Fundal	Text	Contrast	AA la 13px
`--c-accent`	#fff	3.67:1	pică
`--c-accent-deep`	#fff	5.39:1	trece

Metrici

fundal      --c-accent
text        #fff · 13px / 18px
padding     7px 11px
radius      --r-sm (10px)
lățime      max-content, cel mult 260px
aer         8px între declanșator și bulă
umbră       --sh-md
săgeată     8px, rotită 45°, aceeași culoare; la mijlocul muchiei, sau la 16px pe .start / .end
apariție    opacity 100ms · 120ms întârziere la hover · 0 la focus

Tooltipul e pointer-events: none — nu poate fi ținta unui click, deci nu poate conține acțiuni. Ceva pe care utilizatorul trebuie să-l apese e un .popover.

Reguli

Hover ȘI focus. Un tooltip care apare doar la hover nu există pentru tastatură. aria-describedby pe declanșator, role="tooltip" pe el.
Latura e o clasă. Nu left / top inline — offsetul, centrarea și săgeata vin din clasă, ca toate tooltipurile din produs să cadă la fel.
Ascunsă în repaus. .is-open e pentru documentație și JS, nu pentru o bulă mereu aprinsă.
Nu pune informație necesară în el. Ce e obligatoriu ca să completezi un câmp e .field-help, vizibil permanent.
O propoziție. Peste ~140 de caractere, e conținut de pagină sau un .popover.
Fără acțiuni. Vezi mai sus — dispare la mișcarea mouse-ului.
A doua plasare: eticheta din rail-ul icon-only. .sidebar.icon-only .sidebar-label e aceeași bulă (selector grupat cu .tooltip în bono-ds.css), așezată de sidebar la dreapta railului, la hover și focus. Acolo e numele itemului, nu o descriere — fără aria-describedby, fără title. Vezi App navigation.