Crea tooltip con i CSS.
Demo: Esempi di Tooltip
Un tooltip è spesso usato per specificare informazioni extra su qualcosa quando l’utente muove il puntatore del mouse su un elemento:
Basic Tooltip
Crea un tooltip che appare quando l’utente muove il mouse sopra un elemento:
Esempio spiegato
Il testo del tooltip è posto all’interno di un elemento in linea (come <span>) con class="tooltiptext".
CSS: La classe tooltip usa position:relative, che è necessario per posizionare il testo tooltip (position:absolute).Nota: vedi gli esempi qui sotto su come posizionare il tooltip.
La classe tooltiptext contiene il testo tooltip vero e proprio. È nascosto per impostazione predefinita, e sarà visibile su hover (vedi sotto). Abbiamo anche aggiunto alcuni stili di base: 120px di larghezza, colore di sfondo nero, colore del testo bianco, testo centrato, e 5px di padding superiore e inferiore.
La proprietà CSS border-radius è usata per aggiungere angoli arrotondati al testo del tooltip.
Il selettore :hover è usato per mostrare il testo tooltip quando l’utente muove il mouse sopra il <div> con class="tooltip".
Posizionamento dei Tooltip
In questo esempio, il tooltip è posto alla destra (left:105%) del testo “hoverable” (<div>). Notate anche che top:-5px è usato per metterlo al centro del suo elemento contenitore. Usiamo il numero 5 perché il testo del tooltip ha un padding superiore e inferiore di 5px. Se aumentate il suo padding, aumentate anche il valore della proprietà top per assicurarvi che rimanga al centro (se è qualcosa che volete). Lo stesso vale se vuoi che il tooltip sia posizionato a sinistra.
Right Tooltip
top: -5px;
left: 105%;
}
Risultato:
Prova tu stesso ”
Left Tooltip
top: -5px;
destra: 105%;
}
Risultato:
Try it Yourself ”
Se vuoi che il tooltip appaia in alto o in basso, vedi gli esempi sotto. Nota che usiamo la proprietà margin-left con un valore di meno 60 pixel. Questo è per centrare il tooltip sopra/sotto il testo hoverable. È impostato alla metà della larghezza del tooltip (120/2 = 60).
Frecce tooltip
Per creare una freccia che dovrebbe apparire da un lato specifico del tooltip, aggiungi un contenuto “vuoto” dopo il tooltip, con la classe pseudo-elemento ::after insieme alla proprietà content. La freccia stessa è creata usando i bordi. Questo farà apparire il tooltip come una bolla di discorso.
Questo esempio dimostra come aggiungere una freccia al fondo del tooltip:
Esempio spiegato
Posizione della freccia all’interno del tooltip: top: 100% metterà la freccia in fondo al tooltip. left: 50% centrerà la freccia.
Nota: La proprietà border-width specifica la dimensione della freccia. Se la cambiate, cambiate anche il valore margin-left allo stesso modo. Questo manterrà la freccia centrata.
Il border-color è usato per trasformare il contenuto in una freccia. Abbiamo impostato il bordo superiore su nero e il resto su trasparente. Se tutti i lati fossero neri, ti ritroveresti con una scatola quadrata nera.
Questo esempio dimostra come aggiungere una freccia alla parte superiore del tooltip. Notate che questa volta abbiamo impostato il colore del bordo inferiore:
Questo esempio dimostra come aggiungere una freccia a sinistra del tooltip:
Questo esempio dimostra come aggiungere una freccia a destra del tooltip:
Fade In Tooltips (Animazione)
Se volete far sfumare il testo del tooltip quando sta per essere visibile, potete usare la proprietà CSS transition insieme alla proprietà opacity, e passare da completamente invisibile al 100% visibile, in un numero di secondi specificato (1 secondo nel nostro esempio):