gallyack

Efeito Tooltip somente com CSS

Veja online aqui (xx)

Bom, em seu Css você vai inserir esse código (xx).

É nele que você deve modificar cores, tamanhos, estilos, etc. O código do a.tooltip e a.tooltip:hover dará forma aos nome onde o tooltip será ligado, no exemplo acima, esses nomes são: Home, Contato, Textos… Ou seja, ele é para dar formatação ao texto que é um link.

Já o restante do código é para formatar a caixinha tooltip que irá aparecer. Tamanho, cores, fonte e etc.

Se você já tem o menu pronto, basta acrescentar somente os CSS que tem o SPAN.

Bom, agora vamos a parte de colocar ele. Dando continuidade ao exemplo que dei, assim que eu vou colocar ele onde eu desejar que ele apareça (xx).

As palavras que ficam entre <span> </span> será o que vai aparecer quando passamos o mouse. 

Bom, se você souber mexer um pouco com CSS verá que pode colocar esse tooltip em qualquer lugar, inclusive em imagens. Se não souber, vem na ask que ensino.

Espero que gostem. Se usar me credite e dê LIKE.