Suggerimenti W3.CSS
Passa il mouse sopra le frasi seguenti:
Londra è la capitale dell'Inghilterra.(9 million inhabitants)
Londra 9 million inhabitants è la capitale dell'Inghilterra.
Classi di descrizione comando W3.CSS
W3.CSS fornisce le seguenti classi di suggerimenti:
| Classe | Definisce |
|---|---|
| descrizione comando w3 | L'elemento della descrizione comando |
| w3-testo | Il testo del suggerimento |
Elemento della descrizione comando e testo della descrizione comando
Le descrizioni comandi mostrano il testo (o altro contenuto) quando passi il mouse su un elemento HTML.
La classe w3-tooltip definisce l'elemento su cui passare il mouse (il contenitore del suggerimento).
La classe w3-text definisce il testo del suggerimento.
Passa il mouse sopra la frase qui sotto:
Londra è la capitale dell'Inghilterra.(9 million inhabitants)
Esempio
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Tooltip come tag
Passa il mouse sopra la frase qui sotto:
Londra 9 million inhabitants è la capitale dell'Inghilterra.
Esempio
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Descrizione comando immagine
Passa il mouse sopra questa immagine per vedere l'effetto:
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)
Esempio (testo prima dell'immagine)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Esempio (testo dopo l'immagine)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Descrizione comando con posizionamento assoluto
Se vuoi che la descrizione comando appaia in una posizione assoluta, posiziona il testo della descrizione comando con CSS:
Esempio
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
Descrizione comando colorata
Se vuoi una descrizione comando colorata, usa le classi w3- color :
Esempio
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Descrizione comando arrotondata
Se vuoi un suggerimento arrotondato, usa le classi w3- round :
Esempio
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Piccola descrizione comando
Se vuoi un piccolo suggerimento, usa la classe w3-small :
Esempio
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Piccola descrizione comando
Se vuoi un piccolo suggerimento, usa la classe w3-tiny :
Esempio
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Descrizione comando grande
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>