É possível fazer um tooltip com CSS puro? Ou seja, sem jQuery, sem Javascript, mas somente com CSS.
Por exemplo, quero fazer isso baseando no seguinte elemento:
<a href="#" data-tooltip="Meu texto aqui" >LINK</a>
Vou contribuir...
body {
margin: 30px;
}
a.tooltip {
text-decoration: none;
color: #000;
font-family: "Roboto";
font-size: 16px;
transition: all 0.4s ease;
-webkit-transition: all .4s ease;
padding: 5px;
background-color: #FFF;
position: relative;
}
a.tooltip:before {
content: attr(data-title);
background-color: #000;
color: #FFF;
font-size: 13px;
padding: 10px;
box-sizing: border-box;
font-family: "Roboto";
position: absolute;
left: 0;
bottom: -50px;
width: 250px;
opacity: 0;
transition: all .4s ease;
}
a.tooltip:after {
content: "";
position: absolute;
opacity: 0;
width: 0;
height: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000 transparent;
transition: all .4s ease;
}
a.tooltip:hover:after,
a.tooltip:hover:before {
opacity: 1;
}
<a href="#" class="tooltip" data-title="Olá, Mundo. Tudo Bem Com Vocês ?"> Teste de Link </a>
Existe outra forma de fazer isso, onde você possua o elemento que irá receber o tooltip
e um outro para "ser" o tooltip
. Seria basicamente assim:
/*Desconsidere essa parte, é apenas para o snippets do SOpt*/
div {
position: absolute;
left: 20%;
}
/*Desconsidere essa parte, é apenas para o snippets do SOpt*/
div.tooltips {
position: relative;
display: inline;
cursor: pointer;
}
div.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #178BFF;
height: 49px;
line-height: 49px;
text-align: center;
visibility: hidden;
border-radius: 17px;
}
div.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #178BFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
div:hover.tooltips span {
visibility: visible;
opacity: 0.9;
top: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
<div class="tooltips" href="#">Estou aqui!
<span>Alá, sou diferente...</span>
</div>
Apenas para fins de conhecimento, existe geradores de tooltip online.
span
. Seu tooltip ganhou do meu ;)
Commented
4/12/2015 às 12:25
span
eu limito ao elemento, mas colocando como classe a pessoa pode querer colocar em "qualquer coisa", e poderia ter problemas. Mas não creio que o meu está melhor que o seu. Essa é uma abordagem muito "simplista".
Sim, é possível!
Podemos utilizar o atributo :after
para isso, veja:
.wm-tooltip{
position:relative;
}
.wm-tooltip:after
{
background-color:rgba(0, 0, 0, .6);
color: white;
box-sizing:border-box;
content: attr(data-tooltip);
display:none;
padding:5px;
position:absolute;
right: -105px;
bottom: -55px;
z-index:3;
box-shadow: 0 0 3px #000;
border-radius: 0px 10px 10px 10px;
}
.wm-tooltip:hover:after {
display:block;
}
<div style="padding:10px">
<a href="#" class="wm-tooltip" data-tooltip="Exibe o texto aí prá nós!">Testando</a>
</div>
Os pontos mais importantes aqui é:
:after
com display:none
:hover:after
com display:block
. O :after
estando após o :hover
indica que após o hover do elemento o display:block
do after ficará ativo.
content: attr(data-tooltip)
aqui é onde ocorre a mágica que transforma o texto do data no texto do tooltip.
content
, acaso esqueça de colocar o atributo, algo assim: content: attr(data-tooltip) "Não foi definido o atributo"
Minha ideia é usar o próprio atributo data-tooltip como seletor, e permitir usar em qualquer tipo de tag:
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
top: 20px;
width: 250px;
z-index: 100;
padding: 10px;
text-decoration: none;
font: 14px normal;
border: 1px solid red;
background: white;
color: black;
border-radius: 5px;
box-shadow: 3px 3px 10px grey;
}
[data-tooltip]:hover:before {
display: inline-block;
}
<a href="#" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Lorem ipsum.</a>
<br><br>
<div data-tooltip="Lorem ipsum dolor sit amet">Lorem ipsum.</div>
<br>
<span data-tooltip="Lorem ipsum dolor sit amet">Lorem ipsum.</span>
dialog
para fazer isso.