Dicas do W3.CSS
Passe o mouse sobre as frases abaixo:
Londres é a capital da Inglaterra.(9 million inhabitants)
Londres 9 million inhabitants é a capital da Inglaterra.
Classes de dicas de ferramentas W3.CSS
O W3.CSS fornece as seguintes classes de dicas de ferramentas:
| Classe | Define |
|---|---|
| dica de ferramenta w3 | O elemento de dica de ferramenta |
| w3-texto | O texto da dica de ferramenta |
Elemento de dica de ferramenta e texto de dica de ferramenta
As dicas de ferramentas exibem texto (ou outro conteúdo) quando você passa o mouse sobre um elemento HTML.
A classe w3-tooltip define o elemento sobre o qual passar o mouse (o contêiner da dica de ferramenta).
A classe w3-text define o texto da dica de ferramenta.
Passe o mouse sobre a frase abaixo:
Londres é a capital da Inglaterra.(9 million inhabitants)
Exemplo
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Dica de ferramenta como uma tag
Passe o mouse sobre a frase abaixo:
Londres 9 million inhabitants é a capital da Inglaterra.
Exemplo
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Dica de imagem
Passe o mouse sobre esta imagem para ver o efeito:
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)
Exemplo (texto antes da imagem)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Exemplo (texto após a imagem)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Dica de ferramenta posicionada absoluta
Se você quiser que a dica de ferramenta apareça em uma posição absoluta, posicione o texto da dica de ferramenta com CSS:
Exemplo
<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>
Dica de ferramenta colorida
Se você quiser uma dica de ferramenta colorida, use as classes w3 - color :
Exemplo
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Dica de ferramenta arredondada
Se você quiser uma dica de ferramenta arredondada, use as classes w3 - round :
Exemplo
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Dica de ferramenta pequena
Se você quiser uma pequena dica de ferramenta, use a classe w3-small :
Exemplo
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Dica de ferramenta pequena
Se você quiser uma pequena dica de ferramenta, use a classe w3-tiny :
Exemplo
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Dica de ferramenta 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>