Tooltips com CSS

Postado por: Pedro Rogério 7 de outubro de 2008

Tooltips são aquelas informações extras que aparecem ao colocar o ponteiro do mouse sob um link, ou imagem por exemplo, e você pode aplicar estilos a esses tooltips somente com CSS, sem a utilização de qualquer JavaScript. A técnica é muito simples, e consiste na seguinte marcação HTML:

<p>Fazer <a href="#" class="tooltip">Tooltips<span>Eu sou um tooltip feito com CSS</span></a> é muito fácil.</p>

Nesse exemplo criamos uma classe no CSS chamada tooltip e será apartir dela que iremos aplicar o nosso CSS:

a:hover {background:#ffffff; text-decoration:none;} /* background-color e necessario para o IE6 */
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Essa técnica é muito simples, colocamos o texto do tooltip dentro de uma tag, que no exemplo foi utilizada a tag span, e definimos primeiramente display:none para ela, pois ela só aparecerá quando o usuário colocar o mouse sob o link. Vejam o exemplo.

Categorias: CSS Tags:

Comentários
7 de outubro de 2008
# 1

Bom, muito bom… Adorei a dica, já tinha pensado em fazer isso com JavaScript, o que seria meio chato, assim é muito simples.

Parabéns.

Postado por Fabio Nobre
7 de outubro de 2008
# 2

Como eu já falei né, o importante não é saber faze o tooltips e sim saber aonde eu encontro hehehehe. Muito bacana Pedro valeu.

t+

Postado por rafael veloso ferreira
7 de outubro de 2008
# 3

Olá, como colocar no wordpress?

Postado por NU
7 de outubro de 2008
# 4

@Nu,

Primeiramente você deve ter um pouco de conhecimento HTML e CSS, aí é só adicionar as definições de estilo ao CSS, e fazer o HTML exatamente como foi descrito no tutorial.

Postado por Pedro Rogério
8 de outubro de 2008
# 5

É bem mais simples do se fosse feito em Javascript.
Vou usar essa técnica nos sites que eu fizer também.

Postado por Guilherme Mattos
20 de outubro de 2008
# 6

É mto bom, nuss, ótimo
Soh um detalhe pra ficar 100%
z-index: 999;
ou algo assim pra quando tiver uns objetos position absolute lah ele nao ficar por riba, saka ai:
http://www.jotacred.com.br/index.php?agencias

Postado por VitorGGA
26 de outubro de 2008
# 7

Olá a todos.

Boa dica!
Mas e se em vez de um fundo colorido eu quiser colocar uma imagem estilo cantos arredondados e ficar do tamanho adequado ao que lá aparece escrito?
Já agora queria colocar isso em todos os permanent link’s, podes ajudar?

Cumps!!

Postado por berto87
26 de outubro de 2008
# 8

@Berto,

Você pode utilizar imagens normalmente, só coloque a imagem no a.tooltip:hover span, e altere aqui de a:hover {background:#ffffff;} para a:hover {background:transparent;}. Para funcionar em todos os links, é só seguir o esquema do tutorial!!!

Postado por Pedro Rogério
26 de outubro de 2008
# 9

O que eu quero fazer é colocar esta imagem

http://zkrpja.bay.livefilestore.com/y1pZDjmXO75RbmG77bx_lNy0wsM47qW-mhMQ87L8K08ZW2ziQP-BAtSUPrjROrd5kJpnfUoaEaIgZk/fundo.png

mas que ela redimensione consoante o texto que aparece por cima da imagem, ou seja, se tiver apenas 2 palavras a imagem é mais pequena, se tiver 4 palavras a imagem é maior.

Cumps!
OBRIGADO!!

Não sei se me fiz entender!
Cumps
OBRIGADO!

Postado por berto87
3 de novembro de 2008
# 10

Muito bom, fiz umas adaptações e consegui usar da maneira que eu queria

Postado por Rubens
5 de novembro de 2008
# 11

Fala Pedro Rogério!

Vou utilizar esse tooltip no projeto que estou desenvolvendo agora aqui na empresa. Para o pessoal da BAND. Vamos ver como ficará o resultado final. Abs e valew pelo tuto.

Postado por Felip
18 de novembro de 2008
# 12

berto87
você pode fazer isso utilizando um span dentro de outro, em um você coloca a imagem da direita e no outro você coloca a da esquerda, ou vice-versa o resto é similar a como está no tutorial
bjs!

Postado por [c3]
20 de novembro de 2008
# 13

Eu não consegui fazer funcionar o código do tooltip no FrontPage.
Poderia me auxiliar, enviando o código inteiro?
Esperando não estar extrapolando,
desde já agradecido,
Romero

Postado por Romero
20 de novembro de 2008
# 14

Olá! Adoro esse site! As dicas e tutoriais estão me ajudando bastante!!

Agora, uma dúvida… será q é possível fazer algo parecido com o tooltip em uma imagem? Deixa eu explicar melhor: eu tenho um mapa do estado de são paulo e quero que ao passar com o mouse sobre ele, apareçam em alguns pontos os nomes das cidades. Isso é possível fazer com CSS?

Abraços!
Mari

Postado por Mari
20 de novembro de 2008
# 15

@Mari,

Esse tutorial aqui pode lhe ser útil:

http://www.emanuelblagonic.com/2007/09/08/css-map-in-practice/

Postado por Pedro Rogério
7 de dezembro de 2008
# 16

No funciona correctamente si se encuentra dentro de una etiqueta con la propiedad nowrap=”nowrap”

Postado por lepardo
Quer comentar?

(Obrigatório)

(Obrigatório)