Repensando Tooltips HTML/CSS com CSS3

Foto de clker.com

Olá, bom creio que todos conhecem os tooltips, aquelas caixinhas de textos bonitinhas que trazem algumas informações, pois bem, os tooltips são mais frequentemente (ou sempre) feitos com o auxilio do JavaScript (com jQuery ¬¬), e o fato é que podemos facilmente criar tooltips, talvez não tão avançados quanto os criados com JavaScript, mas que cumprem a mesma função. Nesse post vou mostrar algumas formas de se fazer um tooltip, e algumas formas erradas ou não tão erradas de se fazer um tooltip.

Introdução

Para fazer um tooltip apenas com HTML e CSS a primeira coisa que pensamos é, “O tooltip aparece quando eu dou um hover em um link”. e logo chegamos a uma conclusão, que usar um span dentro de um link e manipula-lo com o pseudo-classe :hover já é o suficiente, e realmente é. O mestre Maujor, assim como outros mestres do desenvolvimento criaram vários tooltips com HTML/CSS que são ótimos, veja o post do maujor sobre tooltip com HTML/CSS, conheça o Pure CSS3 Tooltip.

Primeiro vou mostrar como criar um tooltip, assim como do Maujor e do Pure CSS3 Tooltip, depois vou fazer algumas animações e considerações.

Método convencional

Como eu já disse, o método convencional consisti em manipular um span, dentro de uma ancora, passamos o mouse sobre ele, para isso precisaremos de uma marcação HTML simples:

<p>A especificidade dos seletores <a href="#">CSS<span class="tooltip bottom">Cascading Style Sheets</span></a> é algo muito interessante de estudar, quando escrevemos um seletor para um determinado elemento</p>

Criei uma ancora com com um span.tooltip dentro, quando passar o mouse em cima da ancora (:hover), vou estilizar o span.tooltip que há dentro da ancora, assim criando o efeito de tooltip. Agora veja como fica o CSS:

p a{
   color:blue;
   text-decoration:underline;
   position:relative;
}

Nessa parte eu só coloco uma estilo para minha ancora

.tooltip{
   position: absolute;
   opacity:0;
   border: 1px solid blue;
   background: silver;
   border-radius: 10px;
   text-align: center;
   padding: 5px;
   font: normal 14px/14px Arial;
   width: 170px;
   left: -65px;
   top: -27px;
}

Nessa parte eu já estilizo o .tooltip, colocando-o na possição que eu quero que ele apareça, a propriedade responsável por escode-lo é o opacity:0;

a:hover .tooltip{
    opacity:1;
}

Essa parte é simples, quando passa o mouse em cima da ancora, eu seto o tooltip com opacidade 1 e a mágica é feita.

Você pode checar o resultado do que foi mostrado aqui, este exemplo é compatível com todos os navegadores que eu conheço, menos aqueles que não suportam opacity.

Aplicando animações para tooltip

Claro, as animações são feitas com CSS3, vamos fazer com que assim que passe o mouse sobre a ancora, o nosso tooltip apareça com um efeito de opacidade simples, a marcação HTML é a mesma do exemplo anterior, no CSS basta alterar o seletor .tooltip

.tooltip{
    position: absolute;
    opacity:0;
    border: 1px solid blue;
    background: silver;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    font: normal 14px/14px Arial;
    left: -65px;
    top: -25px;
    width: 170px;

    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:0.1s;    width: 170px;

    -moz-transition-property:opacity, top;
    -moz-transition-duration:0.1s;    width: 170px;

    -ms-transition-property:opacity, top;
    -ms-transition-duration:0.1s;

    -o-transition-property:opacity, top;
    -o-transition-duration:0.1s;
    
    transition-property:opacity, top;
    transition-duration:0.1s;
}

Veja o resultado do exemplo acima aqui.

Um dos problema que apareceu é que o tooltip é mostrado mesmo quando o mouse esta passando sobre o tooltip, e nós queremos que ele apareça só quando passamos o mouse em cima da ancora. Isso é facilmente corrigido, adicionando a propriedade visibility:hidden e visible, veja como fica o CSS:

.tooltip{
    position: absolute;
    opacity:0;
    visibility:hidden;
    border: 1px solid blue;
    background: silver;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    font: normal 14px/14px Arial;
    left: -65px;
    top: -25px;
    width: 170px;

    -webkit-transition-property:opacity, visibility;
    -webkit-transition-duration:0.5s;   

    -moz-transition-property:opacity, visibility;
    -moz-transition-duration:0.5s;  

    -ms-transition-property:opacity, visibility;
    -ms-transition-duration:0.5s;

    -o-transition-property:opacity, visibility;
    -o-transition-duration:0.5s;
    
    transition-property:opacity, visibility;
    transition-duration:0.5s;
}
a:hover .tooltip{
    opacity:1;
    visibility:visible;
}

Veja aqui o resultado do exemplo acima

Animando a posição do tooltip

Para animar a posição do tooltip, basta nós colocarmos uma posição inicial em .tooltip, e assim que ocorrer o hover, nós colocamos a posição final que queremos o elemento, veja como fica:

.tooltip{
    position: absolute;
    opacity:0;
    visibility:hidden;
    border: 1px solid blue;
    background: silver;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    font: normal 14px/14px Arial;
    left: -65px;
    top: -5px;
    width: 170px;

    -webkit-transition-property:opacity, visibility, top;
    -webkit-transition-duration:0.5s;   

    -moz-transition-property:opacity, visibility, top;
    -moz-transition-duration:0.5s;  

    -ms-transition-property:opacity, visibility, top;
    -ms-transition-duration:0.5s;

    -o-transition-property:opacity, visibility, top;
    -o-transition-duration:0.5s;
    
    transition-property:opacity, visibility, top;
    transition-duration:0.5s;
}
a:hover .tooltip{
    opacity:1;
    visibility:visible;    
    left: -65px;
    top: -25px;
}

Veja o resultado do exemplo aqui

O efeito é bem bacana, e pode ser usado de muitas maneiras, com variações de cores, tamanho, posição etc..

O Erro na animação do tooltip

Se você for um bom observador notou que tanto nos exemplos do Pure CSS3 Tooltip quanto nos meus exemplos mostrados aqui, as vezes quando o tooltip esta fechando o mouse se encontra com ele, e acaba parecendo que esta travando, tente passar o mouse em cima do tooltip quando ele estiver fechando e vera esse pequeno problema. Isso acontece por que o span que estamos estilizando esta dentro da ancora, se o elemento estivesse fora da ancora, solucionaríamos esse problema, mas como selecionar um elemento que esta fora da ancora? veja só a próxima sessão.

Tooltip com HTML/CSS

A marcação é simples, escrevemos uma ancora, e logo depois da ancora um span que servira como container do nosso tooltip, veja como fica o HTML:

<p>A especificidade dos seletores <a href="#">CSS</a><span class="tooltipContainer"><span class="tooltip bottom">Cascading Style Sheets</span></span> é algo muito interessante de estudar, quando escrevemos um seletor para um determinado elemento</p>

Repare que temos um .tooltipContainer e dentro dele temos o .tooltip, o .tooltipContainer servirá para posicionarmos o .tooltip acima da ancora.

Agora no CSS teremos algumas melhorias, veja:

p a{
    color:blue;
    text-decoration:underline;
    position:relative;
    z-index:5;
}
.tooltipContainer{
    position:relative;
    z-index:2;
}
.tooltip{
    position: absolute;
    opacity:0;
    visibility:hidden;
    border: 1px solid blue;
    background: silver;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    font: normal 14px/14px Arial;
    left: -65px;
    top: -5px;
    width: 170px;

    -webkit-transition-property:opacity, visibility, top;
    -webkit-transition-duration:0.5s;   

    -moz-transition-property:opacity, visibility, top;
    -moz-transition-duration:0.5s;  

    -ms-transition-property:opacity, visibility, top;
    -ms-transition-duration:0.5s;

    -o-transition-property:opacity, visibility, top;
    -o-transition-duration:0.5s;
    
    transition-property:opacity, visibility, top;
    transition-duration:0.5s;
}
a:hover + .tooltipContainer > .tooltip{
    opacity:1;
    visibility:visible;    
    left: -65px;
    top: -25px;
}

Veja o resultado de como ficou nosso tooltip

Precisamos manter a atenção para algumas coisas, o .tooltipContainer possui posição relativa, para que .tooltip possa receber uma posição absoluta.

A ancora precisa de um z-index maior que o z-index do .tooltipContainer, por que se não o .tooltipContainer acaba ficando em cima da ancora e nunca aconteceria o tão esperado :hover

Vou explicar cuidadosamente o ultimo seletor usado, a partir da ancora atual, seleciono o próximo elemento com class .tooltip que seja filho de .tooltipContainer, dessa forma conseguimos selecionar o elemento que não é filho da própria ancora, mas na verdade ele é o próximo elemento no DOM com isso temos um tooltip com CSS3 muito mais sofisticado e ‘sexy’ como alguns gostariam de chamar.

Conclusão

A conclusão é o resultado final do tooltip, fazendo o tooltip sem que o conteúdo do tooltip seja filho da ancora, podemos fazer efeitos mais bem acabados com CSS3, coisa que poderia dar ‘legs’, pausas, ‘repetições’ indesejadas, se o tooltip fosse filho da ancora.

Da mesma forma que usei uma ancora, você poderia usar qualquer outro elemento que julgue mais semanticamente correto passa isso fim.

Esse ultimo seletor, é suportado por (creio eu) todos os navegadores atuais, testei no IE9 e o tooltip apareceu, porém sem a animação, mas com bordas arredondadas, no IE8 e 7 apareceram com bordas quadradas e sem animação, mas o conteúdo estava lá, ou seja, funcionou!

É isso espero que essas dicas sejam uteis para quem quiser aproveitar, até a próxima =D

Sobre Felquis

Ofelquis é Front-end Developer, criou o TutsMais em Dez/2010 para compartilhar o que vinha estudando sobre Desenvolvimento Web, adora dar um pitado em projetos abertos no Github, tem muitas ideias malucas o dia todo e gosta de participar de eventos para ver os amigos desenvolvedores web distribuídos pelo Brasil.
Esta entrada foi publicada em Sem categoria. Adicione o link permanente aos seus favoritos.

7 respostas a Repensando Tooltips HTML/CSS com CSS3

  1. leonardo disse:

    bem maneiro… o único problema é que fazer em javascript vai tornar os efeitos do tooltip cross-browser e creio eu que dessa forma não… não é?

    • ofelquis disse:

      Creio que sua preocupação é o IE. Dessa forma que fiz, o tooltip funciona até no IE7, porém os efeitos com CSS3 não, acho que o nome disse é graceful degradation

  2. Ronny disse:

    Muito bom..

    Como posso fazer funcionar con click em vez de hover?

    • ofelquis disse:

      No CSS3 existe o pseudo-classe :target que daria para fazer o que você quer, mas creio que o efeito final não é muito bom por mudar a URL e seguir a ancora e coisas do tipo. Mas daria pra fazer sem problemas, outro coisa que é ‘meio’ ruim é que o IE não suporta o :target mas Iphone, IOS, todos os suportam e talvez esse seja o foco, Olha o suporte
      http://caniuse.com/#search=target

      Vou escrever sobre isso quando eu tiver mais um tempo.

  3. luiz tanure disse:

    se quiser ver minha implementação, mas com as ‘setas’ no balão, de uma olhada.. é uma tecnica bem interessante, que tem varias utilidades.. uso :content :after e :before

    http://tanure.com/jobs/globo/layout.html

  4. Pablo disse:

    gotaria de um artigo para fazer o tooltip com imagem, ficaria muito feliz.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>