Softonic

Generatore di Tooltip CSS

Passaggio 1 / 2
Avanti

I tooltip sono spesso il primo posto dove un progetto si rivolge a una libreria JavaScript, ma un semplice pseudo-elemento ::after guidato da un attributo data-tooltip copre il 90% dei casi reali. Questo generatore produce esattamente le regole .tooltip e .tooltip::after di cui hai bisogno: scegli la posizione in alto, in basso, a sinistra o a destra, regola il colore di sfondo e del testo, e copia il blocco nel tuo foglio di stile.

Come integrare il tooltip nel tuo HTML

  1. 1

    Scegli una posizione

    In alto, in basso, a sinistra o a destra. Il generatore utilizza `calc(100% + 8px)` più la giusta trasformazione affinché la bolla si adatti perfettamente al trigger.

  2. 2

    Scegli i colori

    Il colore di sfondo determina la bolla, il colore del testo viene applicato all'etichetta del tooltip. Mantieni il contrasto a 4.5:1 o migliore per la leggibilità.

  3. 3

    Copia il CSS

    Incolla il blocco generato nel tuo foglio di stile. Fornisce le regole `.tooltip`, `.tooltip::after` e una regola `:hover`.

  4. 4

    Markup del trigger

    Aggiungi `class="tooltip" data-tooltip="Il tuo testo"` a qualsiasi elemento. Il `::after` legge l'attributo tramite `content: attr(data-tooltip)`.

Tooltip in puro CSS: cosa guadagni e cosa perdi

Un tooltip solo CSS è piccolo, veloce e funziona anche con JavaScript disabilitato. Tuttavia, vive all’interno dell’ordine sorgente del DOM e quindi eredita alcune limitazioni di cui devi tenere conto nel design.

Cosa fa il CSS generato

  • Imposta il trigger su position: relative in modo che il tooltip assoluto sia ancorato ad esso.
  • Estrae l’etichetta da content: attr(data-tooltip), il che significa che non duplicherai mai il testo.
  • Anima l’opacità con transition: opacity 0.15s, quindi l’apparizione sembra rapida ma non brusca.
  • Usa pointer-events: none sulla bolla in modo che non blocchi mai i clic sul trigger.

Calcoli di posizionamento

Posizione Regola di offset
in alto bottom: calc(100% + 8px); left: 50%; translateX(-50%)
in basso top: calc(100% + 8px); left: 50%; translateX(-50%)
a sinistra right: calc(100% + 8px); top: 50%; translateY(-50%)
a destra left: calc(100% + 8px); top: 50%; translateY(-50%)

Avvertenze di accessibilità

  • data-tooltip non viene letto dai lettori di schermo. Se l’informazione è essenziale, abbinala a aria-label o testo visibile.
  • Gli utenti della tastiera hanno bisogno di :focus-visible oltre a :hover. Estendi la regola generata a .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • I tooltip tagliati da overflow: hidden su un antenato scompariranno. Sposta il trigger fuori dal contenitore di ritaglio o passa a un popover renderizzato in JS per interfacce dense.

Domande frequenti

Un pseudo-elemento mantiene il DOM pulito, evita di duplicare il testo dell’etichetta e ti consente di stilizzare il tooltip senza preoccuparti di abbinare accidentalmente altri elementi. Il costo è che il contenuto di ::after non può essere indicizzato dalla tecnologia assistiva, quindi rinforza il testo critico con aria-label.

Sì, aggiungi un secondo pseudo-elemento, ad esempio .tooltip::before, modellato con una scatola di larghezza/altezza zero e bordi colorati. È un classico trucco del triangolo CSS; il generatore di triangoli CSS in questa suite produce le esatte dichiarazioni di bordo di cui hai bisogno.

Aggiungi transition-delay: 0.3s alla regola ::after ma reimpostala a zero quando esci dall’hover, oppure usa transition: opacity 0.15s 0.3s; per ritardare l’apparizione senza ritardare la scomparsa.

La posizione e i colori che scegli vengono inviati al nostro server per generare il CSS, ma non vengono archiviati né riutilizzati. Nella pagina a più passaggi viaggiano nel link tra i passaggi; nella pagina a una sola fase non viene conservato nulla.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Strumento disponibile in altre lingue