Basicamente é possivel fazer um tooltip sem nada de Javascript, apenas com um link (ou qualquer outra tag que aceite hover) com uma outra tag com display:none (dizendo que não deve ser exibida) que é alterado no hover para display:block.
É muito comum precisarmos exibir explicativos, legendas ou qualquer tipo de informação extra mas sem poluir o layout do site ou sistema.
Para este problema tão recorrente temos as tooltips, que todos já devem conhecer.
Em desenvolvimento web existem centenas de formas de criar tooltips, quase todas atreladas a algum tipo de javascript. Como por exemplo:
Só que muitas vezes não quero ter que usar Javascript para isto, quero só uma tag que seja exibida com rollover. E isto é bem simples de se fazer:
A solução acima é uma adaptação do proposto no site CSS Globe, e basicamente é um link (ou qualquer outra tag que aceite hover) com uma outra tag (no caso um span) com display:none (dizendo que não deve ser exibida) que é alterado no hover para display:block. Simples.
Também acrescentei um onclick=”return false;” no link, para garantir que se o usuário clicar no elemento a url não mude.
Simples mas querendo ou não temos que escrever um pouco, e como programador bom é programador preguiçoso, criamos um helper no Rails para poupar tempo:
Normalmente coloco o método acima no arquivo application_helper.rb do Rails, pois vou usar este helper em toda a minha aplicação.
Feito isto podemos agora chamar em nossas views do Rails desta forma:
<%= help_tooltip "<b>ex.: Lipsum Design LTDA</b><br/>Este nome ..." %>
O restuldo seria algo como a imagem abaixo:
Para concluir, um spec em Rspec de como garantir que este método funcione da forma correta:
Vale lembrar que se você usar algum Framework de Javascript como Jquery, seria bem simples acrescentar efeitos através da classe tip.
