Utilize tooltips somente com css!
O Objetivo do CSS Tooltip é utilizar somente css para criar e posicionar tooltips na tela sem o uso de scripts. Veja a seguir como é simples utiliza-lo. Clique aqui para fazer o download.
Para utilizar basta adicionar somente o atributo data-tooltip
com o valor da mensagem que deseja exibir. A posição padrão é abaixo e no centro do elemento alvo.
Passe o mouse aqui.
<a href="#" data-tooltip="Minha mensagem aqui"></a>
Está disponível 12 posições diferentes. Para utilizar o tooltip em outra posição basta adicionar também um class
com o valor tooltip-position-*
. Valores disponíveis:
<a href="#" class="tooltip-position-tl" data-tooltip="Minha mensagem aqui"></a>TL TC TR
CSS Tooltip está testado em Firefox 6+, Chrome 15+, e Internet Explorer 9+