Andei pesquisando pela web alguma funcionalidade interessante do Jquery para postar aqui no blog. E dentre as várias opções decidi explicar dessa vez, como fazer aqueles tooltips animados que já são bastante utilizados na web.

Veja o demo.

Vejamos inicialmente o XHTML do nosso exemplo. Observe que deve ser declarado o atributo “title” do link, que será utilizado posterior mente pelo script para ser exibido no tooltip.

<ul id="nav">
  <li><a href="#" title="Ir para a página inicial">HOME</a></li>
  <li><a href="#" title="Conheça o autor">SOBRE</a></li>
  <li><a href="#" title="Dúvidas e sugestões">CONTATO</a></li>
</ul>

No CSS utilizei um estilo básico para que vocês customizem de acordo com o layout desejado.

* { margin: 0; padding:0; list-style: none}
body {font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 12px }
a { text-decoration: none; color: #4081CF}
/* estilo para o menu */
#nav {
  float: left;
  width: 390px;
  background: url(img/bg_menu.gif) no-repeat
}
#nav li {
  float: left;
  position: relative
}
#nav li p {
  background-color: #e6e6e6;
  border: 1px solid #bfbfbf;
  color: #4c4c4c;
  width: 150px;
  padding: 10px;
  text-align: center;
  position: absolute;
  top: 70px;
  z-index: 5
}
#nav li a {
  width: 130px;
  height: 54px;
  line-height: 54px;
  font-size:18px;
  display:block;
  text-align: center;
  color: #bcbcbc
}
#nav li a:hover { color: #818181 }

Vamos entender nosso script. Na função each acessamos todos os links para resgata o valor do seu atributo “title” e colocá-lo em um respectivo <p>, que será exibido na animação.

Para o efeito de animação criamos uma função hover, que exibirá o parágrafo com o conteúdo do title do link. Observe:

$(document).ready(function() {
  $("#nav li a").each(function(i) {
      $(this).parent().append("<p></p>"); // adicionando um <p> dentro da <li>
      var textoTitle = $(this).attr("title"); // resgatando o valor do atributo "title"
      $(this).removeAttr("title"); // removendo o attributo title
      $(this).next("p").text(textoTitle).hide(); //colocando o texto do title dentro do <p>
  });
  $("#nav li a").hover(function() {
     $(this).next("p").animate({opacity: "show", top: "50px"}, "slow");
  },
  function() {
     $(this).next("p").animate({opacity: "hide", top: "70px"}, "fast");
  });
});

Vantagens:

• É acessível, pois caso o browser não tenha suporte a script será exibido o tooltip padrão para links.
• Acessa os elementos via DOM, o que otimiza o script diminuindo repetições de códigos.
• É completamente cross browser. Funciona perfeitamente nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download e ajuste às suas necessidades.