Generator tooltip CSS

Exemple de tooltip-uri

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Buton doar cu pictogramă aria-label dă numele butonului pentru cititoarele de ecran; tooltipul îl arată celorlalți.

<button type="button" data-tooltip="Șterge" aria-label="Șterge">
  <svg aria-hidden="true" width="20" height="20">...</svg>
</button>

Tooltip pe un link Linkurile primesc focus din tastatură, deci tooltipul apare și la Tab.

<a href="/termeni/" data-tooltip="Se deschide în aceeași filă">Termeni și condiții</a>

Pe o imagine (cu element părinte) Imaginile nu au ::before și ::after, așa că tooltipul se pune pe elementul care le cuprinde.

<span class="poza" data-tooltip="Cluj-Napoca, 2026" tabindex="0">
  <img src="cluj.jpg" alt="Piața Unirii din Cluj-Napoca" width="320" height="200">
</span>

.poza { display: inline-block; }

Text mai lung pe două rânduri Cu width: max-content și max-width, textul scurt rămâne pe un rând, iar cel lung se împarte.

[data-tooltip]::after {
  width: max-content;
  max-width: 220px;
  white-space: normal;
}

Cum folosești generatorul de tooltip

Scrie textul tooltipului și alege poziția: sus, jos, stânga sau dreapta.
Alege fundalul, culoarea textului, mărimea textului, spațiul interior și colțurile rotunjite.
Activează sau dezactivează săgeata și reglează-i mărimea, apoi întârzierea la apariție și animația (fade, fade + slide sau fără).
Bifează Arată mereu ca să vezi tooltipul fără să ții mouse-ul pe buton, apoi copiază codul. Totul rulează în browser; nu se trimite nimic către server.

Cum funcționează

Textul stă în atributul data-tooltip. Pseudo-elementul ::after îl afișează cu content: attr(data-tooltip), iar ::before desenează săgeata dintr-un triunghi făcut cu borduri. Ambele sunt ascunse cu opacity: 0 și visibility: hidden și apar la :hover și :focus-visible.

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;   /* apare după o scurtă pauză, dispare imediat */
}

Întârzierea este pusă doar pe starea afișată, așa că tooltipul nu clipește când treci repede cu mouse-ul peste mai multe butoane, dar dispare imediat când pleci.

Limite de știut

Pseudo-elementele nu merg pe elemente fără conținut propriu, ca <img> sau <input>; pune tooltipul pe un element care le cuprinde. Textul din ::after nu este anunțat în mod sigur de cititoarele de ecran, așa că la butoanele care au doar o pictogramă pune același text și în aria-label. Un tooltip doar din CSS nu se poate închide cu tasta Esc; pentru informații importante, folosește un text vizibil sau o soluție cu JavaScript.

Întrebări frecvente

Tooltipul iese din ecran pe telefon. Ce fac?

Pe ecrane înguste alege poziția sus sau jos și păstrează textul scurt. CSS-ul simplu nu mută singur tooltipul când nu încape.

Merge pe telefon, unde nu există hover?

La atingere, multe browsere mobile aplică temporar :hover, dar comportamentul diferă. Nu pune în tooltip informații de care utilizatorul are neapărat nevoie.