CSS Tooltip

Utilize tooltips somente com css!

Introdução

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.

Uso Básico

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>

Posições Disponíveis

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
BL BC BR
LT LC LB
RT RC RB

Compatibilidade

CSS Tooltip está testado em Firefox 6+, Chrome 15+, e Internet Explorer 9+