Tooltip

Prezentare

Explică pe scurt un termen sau un control ambiguu, vizibil atât la hover cât și la focus din tastatură, cu fallback la atributul nativ `title`.

Când se folosește

• pentru clarificarea unui termen tehnic sau a formatului așteptat al unui câmp (de exemplu, formatul CNP), unde textul complet nu încape lângă control.

Când nu se folosește

• pentru informații esențiale pentru finalizarea unei sarcini — un tooltip depinde de hover/focus explicit și poate fi ratat; folosește un `hint` vizibil permanent în schimb.

Anatomie

Un `<span class="sd-tooltip-wrapper" data-sd-tooltip">` cu `<button class="sd-tooltip-trigger" data-sd-tooltip-trigger aria-describedby="…" title="…">` și `<span class="sd-tooltip" role="tooltip" hidden>` cu textul explicativ.

Variante

• implicit — o singură variantă

Stări

• `[hidden]` — ascuns implicit, dezvăluit la hover/focus

Comportament

Fără JavaScript: declanșatorul păstrează atributul nativ `title`, afișat de browser la hover — degradare la comportamentul standard al tooltip-urilor native, nu la lipsă totală de informație. Cu JavaScript (`enhanceTooltips`): la `mouseenter`/`focus` afișează `.sd-tooltip` legat prin `aria-describedby` și elimină temporar `title` (evitând dublarea informației); la `mouseleave`/`blur` sau la tasta Escape, îl ascunde din nou și restaurează `title`.

Reguli de conținut

• textul tooltip-ului e scurt (o propoziție) — conținut mai lung aparține unui `hint` vizibil permanent, nu unui tooltip.

Responsabilitățile implementatorului

• declanșatorul trebuie să fie un element focusabil (buton) cu `aria-describedby` valid — altfel tooltip-ul nu e niciodată accesibil de la tastatură.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/52 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/interactive.css';

import { enhanceTooltips } from '@sistem-digital/components';

<span class="sd-tooltip-wrapper" data-sd-tooltip><button type="button" class="sd-tooltip-trigger" data-sd-tooltip-trigger aria-describedby="catalog-tooltip" title="Format: 13 cifre, fără spații">CNP</button><span class="sd-tooltip" role="tooltip" id="catalog-tooltip" hidden>Format: 13 cifre, fără spații</span></span>

Contract și surse

• Documentația familiei Interactive
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).