:: Como criar uma dica de contexto com CSS - ToolTip ::
Introdução
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.
Convém notar que é necessário chamar-se a atenção do visitante para a palavra que contém a dica de contexto, induzindo-o a passar o mouse sobre ela. Para isso devemos destacá-la do texto quer colocando uma cor diferente ou um sublinhado ou outro artifício qualquer.
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! :-)
Este é um texto qualquer destinado a demonstrar a obtenção da dica de contexto com uso das CSSCSS
Sigla para a palavra inglesa "Cascading Style Sheet" foi traduzido para Folhas
de Estilo em Cascata.
Uma técnica de projetar páginas Web,
separando conteúdo da apresentação. e com isto fornecer a você mais uma ferramenta para construção de suas páginas web
Este é o parágrafo seguinte no fluxo normal do documento web..bla..bla..bla...
A técnica
O princípio básico para fazer funcionar a dica de contexto consiste em se "esconder" a dica usando a declaração CSS display: none e faz ê-la "aparecer" com o mouse em cima usando a propriedade a:hover combinada com a propriedade display: block.
Como vamos ter que usar a pseudo classe a:hover teremos que tornar a palavra onde a dica irá funcionar um link. Mas, não queremos um link ali! Criamos então um link "morto" para podermos usar a: hover :-)
O código
Abaixo o código completo da página com a dica e as regras CSS para você copiar colar e estudar offline.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Dica de Contexto </title>
<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:#039;
text-decoration:none;
border-bottom:2px dotted #039;
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 #999;
background:#e0ffff;
color:#000;
}
-->
</style>
</head>
<body>
<p class="formata">
Este é um texto qualquer destinado a demonstrar
a obtenção da dica de contexto com uso das
<a href="#" class="dcontexto">CSS
<span><strong>CSS</strong>
Sigla para a palavra inglesa "Cascading Style Sheet"
foi traduzido para <strong>Folhas de Estilo em
Cascata </strong>.Uma técnica de projetar páginas Web,
separando conteúdo da apresentação.</span></a>
e com isto fornecer a você mais uma ferramenta
para construção de suas páginas web </p>
<p class="formata">Este é o parágrafo seguinte
no fluxo normal
do documento web..bla..bla..bla...</p>
</body>
</html>
Última modificação: 2006/08/30 10:32:54 GMT
Criado em: 2004-05-18
Atualizado em: 2005-04-11
