Nesta dica vou mostrar como obter o efeito "dica de contexto" (em inglês: tooltip) que consiste em abrir-se uma janelinha com uma explicação adicional quando o visitante passa o mouse sobre uma palavra ou pequeno trecho de um texto.
No quadro abaixo demonstro como funciona a dica de contexto. Notar que a palavra CSS está destacada do texto e é de se esperar que o visitante e você também coloque seu mouse sobre a palavra! :-)

Amizade
Um sentimento que abraço com muito carinho
Amizade está lá em todos os momentos
Sentimento de partilha para os dias de sol e de chuva
Sentimento para quem segue a caminhada connosco
Sentimento que assume quando estamos errados
Sentimento de estrelas, que nem sempre vemos mas sabemos que estão lá a torcer por nós
Sentimento que escuta o silêncio do coração
Quero fazer dela um pote de mel
Quero enche-la de amor, pois a amizade confraterniza muitos sentimentos e um deles é o amor...
Amizade é isso mesmo: uma forma de amar!
Ninguém é feliz sozinho, sem amigos, a amizade floresce a alma com ternura!!!
Viva a ternura da amizade!
"................................................."
.

coloque seu mouse sobre a palavra!


<style type="text/css"> <!-- .formata { /* esta classe é somente para formatar a fonte */ font: 12px arial, verdana, helvetica, sans-serif; } a.dcontexto{ position:relative; font:12px arial, verdana, helvetica, sans-serif; padding:0; color:#FF0000; text-decoration:none; border-bottom:2px dotted #FF0000; cursor:help; z-index:24; } a.dcontexto:hover{ background:transparent; z-index:25; } a.dcontexto span{display: none} a.dcontexto:hover span{ display:block; position:absolute; width:230px; top:3em; text-align:justify; left:0; font: 12px arial, verdana, helvetica, sans-serif; padding:5px 10px; border:1px solid #FFFF00; background:#FFFF00; color:#FF0000; } --> </style><br /> <br /> <br /> <br /> <div class="formata"><br /> <a class="dcontexto" href="http://www.blogger.com/post-edit.do#"><br /> <b></b></a><br /> <h1><a class="dcontexto" href="http://www.blogger.com/post-edit.do#"><br /> <span style="color: blue;"> COLOQUE AQUI O TEXTO </span><br /> "................................................."<br /> <b> </b>.</a> <br /> </h1></div><div class="formata"><br /> </div>