Creazione di tooltip con i CSS.
Esempi Tooltip: Demo
Un suggerimento viene spesso utilizzato per specificare le informazioni supplementari su qualcosa quando l'utente sposta il puntatore del mouse su un elemento:
Tooltip di base
Creare un tooltip che appare quando l'utente sposta il mouse su un elemento:
Esempio
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Hover
over me
<span class="tooltiptext"> Tooltip
text </span>
</div> Prova tu stesso " esempio spiegato
HTML) Utilizzare un elemento contenitore (come <div> ) e aggiungere il "tooltip" classe ad esso. Quando il mouse utente su questo <div> , che mostrerà il testo della descrizione comandi.
Il testo tooltip è inserito all'interno di un elemento in linea (come <span> ) con class="tooltiptext" .
CSS) Il tooltip classe di uso position:relative , che è necessaria per posizionare il testo tooltip ( position:absolute .) Nota: Si vedano gli esempi qui sotto su come posizionare il tooltip.
Il tooltiptext classe contiene il testo effettivo tooltip. Si è nascosta per impostazione predefinita, e sarà visibile al passaggio del mouse (vedi sotto). Abbiamo anche aggiunto alcuni stili di base ad esso: larghezza 120px, colore di sfondo nero, colore del testo bianco, testo centrato, e superiore 5px e imbottitura in basso.
Il CSS3 border-radius proprietà viene utilizzata per aggiungere gli angoli arrotondati al testo tooltip.
L' :hover selettore viene utilizzato per visualizzare il testo della descrizione comandi quando l'utente sposta il mouse sopra il <div> con class="tooltip" .
Posizionamento Tooltips
In questo esempio, la descrizione comando è posto a destra (left:105%) del "hoverable" testo (<div>) . Si noti inoltre che top:-5px viene utilizzato per posizionare in mezzo del suo elemento contenitore. Usiamo il numero 5 perché il testo tooltip ha una imbottitura superiore e inferiore di 5px. Se si aumenta la sua imbottitura, aumenta anche il valore della top proprietà per garantire che rimanga in mezzo (se questo è qualcosa che si desidera). Lo stesso vale se si desidera che la descrizione comando collocato a sinistra.
Tooltip destro
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Risultato:
Tooltip sinistra
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Risultato:
Se si desidera che il tooltip appaia in alto o in basso, si vedano gli esempi qui sotto. Si noti che usiamo la margin-left proprietà con un valore meno 60 pixel. Questo è quello di centrare il tooltip sopra / sotto il testo hoverable. Si trova alla metà della larghezza del tooltip (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Risultato:
Tooltip fondo
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Risultato:
Frecce tooltip
Per creare una freccia che dovrebbe apparire da un lato specifico del tooltip, aggiungere il contenuto "vuoto" dopo il tooltip, con la classe pseudo-elemento ::after assieme al content proprietà. La freccia si è creata usando confini. Questo renderà l'aspetto tooltip come una nuvoletta.
Questo esempio dimostra come aggiungere una freccia verso il basso del tooltip:
Freccia in basso
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Risultato:
esempio spiegato
Posizionare la freccia all'interno del tooltip: top: 100% metterà la freccia nella parte inferiore del tooltip. left: 50% sarà centrare la freccia.
Nota: Il border-width proprietà specifica la dimensione della freccia. Se si modifica questo, cambiare anche il margin-left valore alla stessa. Ciò manterrà la freccia al centro.
Il border-color viene utilizzato per trasformare il contenuto in una freccia. Abbiamo impostato il bordo superiore al nero, e il resto a trasparente. Se tutte le parti erano neri, si finisce con una scatola quadrata nera.
Questo esempio dimostra come aggiungere una freccia verso l'alto del tooltip. Si noti che abbiamo impostato il colore del bordo in basso questa volta:
Top Freccia
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Risultato:
Questo esempio dimostra come aggiungere una freccia a sinistra del tooltip:
Freccia sinistra
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Risultato:
Questo esempio dimostra come aggiungere una freccia alla destra del tooltip:
Freccia destra
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Risultato:
Fade In Tooltips (Animazione)
Se si vuole svanire nel testo della descrizione comandi quando si è in procinto di essere visibile, è possibile utilizzare la CSS3 transition di proprietà insieme alla opacity di proprietà, e passare da essere completamente invisibile al 100% visibile, in un certo numero di secondi specificato (1 secondo nel nostro esempio):
Esempio
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Prova tu stesso " Nota: Si impara di più su transizioni e le animazioni più avanti nel nostro tutorial.