Descrizione comando CSS
Crea descrizioni comandi con CSS.
Demo: esempi di descrizioni comandi
Un suggerimento viene spesso utilizzato per specificare informazioni aggiuntive su qualcosa quando l'utente sposta il puntatore del mouse su un elemento:
Descrizione comando di base
Crea una descrizione comando 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>
Esempio spiegato
HTML: usa un elemento contenitore (come <div>) e aggiungi la
"tooltip"classe ad esso. Quando l'utente passa il mouse su questo <div>, mostrerà il testo del suggerimento.
Il testo della descrizione comando viene inserito all'interno di un elemento inline (come <span>) con class="tooltiptext".
CSS: la tooltipclasse use position:relative, necessaria per posizionare il testo del tooltip ( position:absolute).
Nota: vedere gli esempi seguenti su come posizionare la descrizione comando.
La tooltiptextclasse contiene il testo effettivo del suggerimento. È nascosto per impostazione predefinita e sarà visibile al passaggio del mouse (vedi sotto). Abbiamo anche aggiunto alcuni stili di base: larghezza 120px, colore di sfondo nero, colore del testo bianco, testo centrato e riempimento superiore e inferiore di 5px.
La proprietà CSS border-radiusviene utilizzata per aggiungere angoli arrotondati al testo del suggerimento.
Il :hoverselettore viene utilizzato per mostrare il testo del suggerimento quando l'utente sposta il mouse sul <div> con class="tooltip".
Suggerimenti per il posizionamento
In questo esempio, il suggerimento è posizionato a destra ( left:105%) del testo "hoverable" (<div>). Si noti inoltre che top:-5pxviene utilizzato per posizionarlo al centro del suo elemento contenitore. Usiamo il numero 5 perché il testo della descrizione comando ha un riempimento superiore e inferiore di 5px. Se aumenti la sua imbottitura, aumenta anche il valore della topproprietà per assicurarti che rimanga nel mezzo (se questo è qualcosa che vuoi). Lo stesso vale se vuoi che il suggerimento sia posizionato a sinistra.
Descrizione comando a destra
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Risultato:
Descrizione comando a sinistra
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Risultato:
Se desideri che la descrizione comando appaia in alto o in basso, guarda gli esempi di seguito. Si noti che utilizziamo la margin-leftproprietà con un valore di meno 60 pixel. Questo serve per centrare il suggerimento sopra/sotto il testo hoverable. È impostato sulla metà della larghezza della descrizione comando (120/2 = 60).
Descrizione comando superiore
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Risultato:
Descrizione comando in basso
.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 della descrizione comando
Per creare una freccia che dovrebbe apparire da un lato specifico della descrizione comando, aggiungi contenuto "vuoto" dopo la descrizione comando, con la classe pseudo-elemento ::afterinsieme alla content
proprietà. La freccia stessa viene creata utilizzando i bordi. In questo modo la descrizione comando sembrerà un fumetto.
Questo esempio mostra come aggiungere una freccia in fondo alla descrizione comando:
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
Posiziona la freccia all'interno della descrizione comando: top: 100%posizionerà la freccia nella parte inferiore della descrizione comando. left: 50%centra la freccia.
Nota: la border-widthproprietà specifica la dimensione della freccia. Se lo modifichi, cambia anche il margin-leftvalore allo stesso. Ciò manterrà la freccia centrata.
border-colorViene utilizzato per trasformare il contenuto in una freccia . Impostiamo il bordo superiore su nero e il resto su trasparente. Se tutti i lati fossero neri, finiresti con una scatola quadrata nera.
Questo esempio mostra come aggiungere una freccia nella parte superiore della descrizione comando. Nota che questa volta impostiamo il colore del bordo inferiore:
Freccia in alto
.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 mostra come aggiungere una freccia a sinistra della descrizione comando:
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 mostra come aggiungere una freccia a destra della descrizione comando:
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:
Descrizioni comandi dissolvenza in apertura (animazione)
Se vuoi sfumare nel testo del tooltip quando sta per essere visibile, puoi utilizzare la transitionproprietà CSS insieme alla opacity
proprietà, e passare dall'essere completamente invisibile al 100% visibile, in un numero di secondi specificato (1 secondo nel nostro esempio):
Esempio
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}