I tooltip visualizzare il testo (o altri contenuti) quando si passa sopra un elemento HTML.
Inline Tooltip di testo
Passa il mouse sopra la frase qui sotto!
Londra 9 milioni è la capitale d'Inghilterra.
La classe w3-tooltip definisce l'elemento HTML librarsi sopra (contenitore tooltip).
La classe w3-text definisce il testo tooltip:
Esempio
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Prova tu stesso " Inline Tooltip Tag
Passa il mouse sopra la frase qui sotto!
Londra 9 milioni è la capitale d'Inghilterra.
La classe w3-tooltip definisce l'elemento HTML librarsi sopra (contenitore tooltip).
La classe w3-text definisce il testo tooltip:
Esempio
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Prova tu stesso " Grande Tooltip
Passa il mouse sopra questa immagine per vedere l'effetto:
Una macchina è un veicolo a motore autoalimentato ruote utilizzato per il trasporto. La maggior parte delle definizioni del termine specificare che le auto in genere hanno quattro ruote. (Wikipedia)
La classe w3-tooltip definisce l'elemento HTML librarsi sopra (contenitore tooltip).
La classe w3-text definisce il testo tooltip:
Esempio (testo prima foto)
<div class="w3-tooltip">
<p
class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> Prova tu stesso " Esempio (testo dopo l'immagine)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
</div> Prova tu stesso " Descrizione comando assoluto
Se si desidera che il tooltip di apparire in una posizione assoluta, posizionare il testo tooltip (w3-text):
Esempio
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> Prova tu stesso " Colored Tooltip
Se volete un suggerimento di colore, utilizzare le classi w3-colore:
Tooltip arrotondato
Se si desidera un tooltip arrotondato, utilizzare le classi w3 turno:
piccolo Tooltip
Se volete un piccolo suggerimento, utilizzare la classe w3-piccola:
piccolo Tooltip
Se si desidera un piccolo suggerimento, utilizzare la classe w3-tiny:
Grande Tooltip
Se si vuole un grande suggerimento, utilizzare le classi W3-grandi dimensioni: