81

É 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>
1

4 Respostas 4

65

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>

0
52
+100

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.

11
  • 2
    Você é um gênio! +1. A única coisa que eu faria era usar uma classe ao invés do span. Seu tooltip ganhou do meu ;) Commented 4/12/2015 às 12:25
  • 1
    Legal, e assim da suporte a navegadores mais antigos (se bem que é dificil alguém usa-los) +1
    – Syzoth
    Commented 4/12/2015 às 12:29
  • @WallaceMaxters Colocando como 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".
    – Randrade
    Commented 4/12/2015 às 12:32
  • @GuilhermeNascimento Sim, concordo com você, e realmente acho difícil alguém usar com as ferramentes que temos hoje (eu mesmo não uso).
    – Randrade
    Commented 4/12/2015 às 12:32
  • Temos que concordar que é mais rápido do que usar javascript. E ultimamente estou preferindo fazer com CSS puro do que com jQuery (animates por exemplo) Commented 4/12/2015 às 12:34
41

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.

6
  • 3
    Lembrando que seria legal usar o fallback no content, acaso esqueça de colocar o atributo, algo assim: content: attr(data-tooltip) "Não foi definido o atributo"
    – Syzoth
    Commented 4/12/2015 às 12:27
  • 1
    @GuilhermeNascimento, Edição autorizada com successo ;) Commented 4/12/2015 às 12:33
  • Acho que você mesmo poderia editar, mas obrigado por me permitir colaborar :)
    – Syzoth
    Commented 4/12/2015 às 12:40
  • Mas porque o padrão aparece junto ? Commented 4/12/2015 às 12:40
  • @TaoPaiPai Sério, não notei, eu segui a documentação Mozilla, vou fazer o rollback e depois edito novamente.
    – Syzoth
    Commented 4/12/2015 às 12:41
21

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .