Popover vs. Tooltip
Un tooltip dà un breve suggerimento. Un popover può contenere più testo, scelte o pulsanti.
Usa un tooltip quando poche parole sono sufficienti. Usa un popover quando una persona deve leggere o fare di più senza lasciare la pagina.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Popover
Un popover è un piccolo pannello attaccato al controllo che lo ha aperto. Può contenere contenuti strutturati e azioni senza bloccare la pagina.
popover attribute / PopoverSeleziona un avatar per aprire un piccolo profilo. Mostra il ruolo della persona, i dettagli di contatto e un'azione Segui.
- Usalo quando
- Usalo quando il contenuto appartiene accanto al suo trigger e le persone possono continuare a usare la pagina.
- Non usarlo quando
- Non usarlo mai per un suggerimento breve che contiene solo un'etichetta. Usa invece un tooltip.
- Nome usato nel codice
popover attribute / Popover
Suggerimento
Un tooltip è una breve nota su un controllo. Si apre quando il mouse ci passa sopra o la tastiera lo seleziona. Le persone non possono usarlo come un pulsante.
role="tooltip"Quando un pulsante icona riceve il focus da tastiera, appare “Copia link”. Il focus resta sul pulsante.
- Usalo quando
- Usalo per spiegare brevemente un’etichetta di controllo sia al passaggio del mouse sia al focus della tastiera.
- Non usarlo quando
- Non mettere mai azioni, istruzioni da leggere assolutamente o contenuti lunghi all'interno di un tooltip.
- Nome usato nel codice
role="tooltip"
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| PopoverPopover | Usalo quando il contenuto appartiene accanto al suo trigger e le persone possono continuare a usare la pagina. | Non usarlo mai per un suggerimento breve che contiene solo un'etichetta. Usa invece un tooltip. | popover attribute / Popover |
| SuggerimentoTooltip | Usalo per spiegare brevemente un’etichetta di controllo sia al passaggio del mouse sia al focus della tastiera. | Non mettere mai azioni, istruzioni da leggere assolutamente o contenuti lunghi all'interno di un tooltip. | role="tooltip" |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Popover (Popover), Suggerimento (Tooltip) per il nostro reale flusso utente. Usa questa regola: Un tooltip dà un breve suggerimento. Un popover può contenere più testo, scelte o pulsanti. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.