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
Bom, muito bom… Adorei a dica, já tinha pensado em fazer isso com JavaScript, o que seria meio chato, assim é muito simples.
Parabéns.
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+
Olá, como colocar no wordpress?
@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.
É bem mais simples do se fosse feito em Javascript.
Vou usar essa técnica nos sites que eu fizer também.
É 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
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!!
@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!!!
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!
Muito bom, fiz umas adaptações e consegui usar da maneira que eu queria
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.
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!
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
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
@Mari,
Esse tutorial aqui pode lhe ser útil:
http://www.emanuelblagonic.com/2007/09/08/css-map-in-practice/
No funciona correctamente si se encuentra dentro de una etiqueta con la propiedad nowrap=”nowrap”