As dicas de ferramentas exibir o texto (ou outro conteúdo) quando você passa o mouse sobre um elemento HTML.
Inline Tooltip Texto
Passe o mouse sobre a sentença abaixo!
9 London milhões é a cidade capital da Inglaterra.
A classe w3-dica define o elemento HTML a pairar sobre (container sugestão).
A classe w3-texto define o texto dica:
Exemplo
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Tente você mesmo " Tag Tooltip inline
Passe o mouse sobre a sentença abaixo!
9 London milhões é a cidade capital da Inglaterra.
A classe w3-dica define o elemento HTML a pairar sobre (container sugestão).
A classe w3-texto define o texto dica:
Exemplo
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Tente você mesmo " Grande Tooltip
Passe o mouse sobre esta imagem para ver o efeito:
Um carro é um veículo motorizado rodado, auto-alimentado utilizado para o transporte. A maioria das definições do termo especifica que os carros tipicamente ter quatro rodas. (Wikipedia)
A classe w3-dica define o elemento HTML a pairar sobre (container sugestão).
A classe w3-texto define o texto dica:
Exemplo (texto antes de a 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> Tente você mesmo " Exemplo (texto após a imagem)
<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> Tente você mesmo " Dica absoluta
Se você quiser a dica de ferramenta para aparecer em uma posição absoluta, posicionar o texto dica de ferramenta (w3-texto):
Exemplo
<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> Tente você mesmo " Colorido Tooltip
Se você quer uma dica de ferramenta de cor, use as classes w3-color:
Dica arredondada
Se você quer uma dica de ferramenta arredondada, use as classes w3-redondas:
Dica pequena
Se você quiser uma pequena dica de ferramenta, use a classe w3-pequenas:
Dica minúsculo
Se você quiser uma pequena dica de ferramenta, use a classe w3-tiny:
Grande Tooltip
Se você quiser uma grande dica de ferramenta, use as classes w3-grande: