Suggerimenti CSS
- Pagina precedente Animazioni CSS
- Pagina successiva Stili di immagine CSS
Crea un tooltip (Tooltip) utilizzando CSS.
Esempio: Tooltip
Esempio
Quando l'utente passa il mouse su un elemento, il tooltip viene spesso utilizzato per fornire informazioni aggiuntive su un contenuto:
Tooltip di base
Crea un tooltip che si visualizza quando si passa il mouse su un elemento:
Esempio
<style>
/* Contenitore tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Se necessario, visualizza una linea punteggiata sotto il testo hoverabile */
}
/* Testo tooltip */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Posiziona il testo tooltip - vedi l'esempio sottostante */
position: absolute;
z-index: 1;
}
/* Visualizza il testo tooltip quando il mouse è sopra il contenitore del tooltip */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Passa il mouse su di me
<span class="tooltiptext">Testo tooltip</span>
</div>
esempio di spiegazione
HTML:
utilizzando l'elemento contenitore (ad esempio <div>) e aggiungendo "tooltip" classe. Quando l'utente passa il mouse su questo <div>, viene visualizzato il testo dell'infotip.
Il testo dell'infotip si trova nella class="tooltiptext" elementi incorporati (come <span>)
CSS:
tooltip la classe position:relativeper posizionare il testo dell'infotip (position:absolute）。Attenzione: per informazioni su come posizionare l'infotip, vedere gli esempi seguenti.
tooltiptext classe che保存 il testo dell'infotip. Di default è nascosto e diventa visibile quando si passa il mouse sopra (vedi di seguito). Abbiamo aggiunto anche alcuni stili di base: larghezza di 120 pixel, sfondo nero, testo bianco, testo centrato e margini interni superiori e inferiori di 5px (padding).
CSS border-radius attributo per aggiungere arrotondamenti alle corner del testo dell'infotip.
quando l'utente posiziona il mouse su <div> con class="tooltip",:hover selettore per visualizzare il testo dell'infotip.
Posizionamento dell'infotip
In questo esempio, l'infotip si trova a destra del testo hover (left:105%）。Inoltre, notare chetop:-5px usato per posizionarlo al centro dell'elemento contenitore. Utilizziamo il numero 5 perché i margini interni superiori e inferiori del testo dell'infotip sono entrambi di 5px. Se si aumenta i margini interni, si prega di aumentare anche top Il valore dell'attributo per assicurarsi che rimanga al centro. Se si desidera posizionare l'infotip a sinistra, si applica allo stesso modo.
Infotip di destra
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Risultato:
Infotip di sinistra
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Risultato:
Se desideri che l'infotip si trovi in alto o in basso, consulta gli esempi seguenti. Nota che abbiamo utilizzato un margine sinistro negativo di 60 pixel (margin-left). Questo è per centrare l'infotip con il testo hover. Questo valore è metà della larghezza dell'infotip (120/2 = 60).
Infotip superiore
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Usa metà della larghezza (120/2 = 60) per centrare l'infotip */
}
Risultato:
Infotip inferiore
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Usa metà della larghezza (120/2 = 60) per centrare l'infotip */
}
Risultato:
Freccia dell'infotip
Per creare una freccia che si visualizza sul lato specificato dell'infotip, aggiungi il contenuto "vuoto" all'infotip e utilizza la classe di pseudo-elemento ::after e content proprietà. L'arco stesso è creato utilizzando i bordi. Questo farà sembrare l'infotip come una bolla.
Questo esempio dimostra come aggiungere un arco in basso nell'infotip:
arco di sotto
.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 di spiegazione
posiziona l'arco all'interno dell'infotip:top: 100% posiziona l'arco nella parte inferiore dell'infotip.left: 50% farà sì che l'arco sia centrato.
Attenzione:border-width l'attributo specifica la dimensione dell'arco. Se modifichi questa impostazione, non dimenticare di modificare anche margin-left modificare il valore in uno stesso valore. Questo farà sì che l'arco sia centrato.
border-color usato per trasformare il contenuto in un arco. Impostiamo il bordo superiore in nero e gli altri in trasparente. Se tutte le facce sono nere, otterremo una scatola quadrata nera.
Questo esempio dimostra come aggiungere un arco in alto nell'infotip. Nota che questa volta abbiamo impostato il colore del bordo inferiore:
arco di sopra
.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 un arco alla sinistra dell'infotip:
arco di 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 un arco alla destra dell'infotip:
arco di 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:
Tooltip con transizione d'ingresso
Se si desidera far apparire o scomparire gradualmente il testo della tooltip, è possibile utilizzare CSS transition Proprietà con opacity Utilizzare insieme le proprietà e diventare visibili nel numero di secondi specificato (nel caso in esame è 1 secondo) da invisibili al 100% visibili:
Esempio
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Pagina precedente Animazioni CSS
- Pagina successiva Stili di immagine CSS
