Como criar uma dica de contexto com CSS - ToolTip

Publicado em: 18/05/2004
Atualizada pelo Maujor em: 11/04/2005

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 pseudo-classe :hover e a ela declarando a propriedade display: block.

Como vamos ter que usar a pseudo-classe :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.

Nota: À época que este tutorial foi escrito a pseudo-classe :hover era suportada nos navegadores apenas para o elemento a da HTML. Hoje, a maioria dos navegadores já suporta :hover declarado para elementos HTML em geral e podemos abrir mão do link 'morto'.

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;
  color:#f00;
  z-index:25; 
  }
  a.dcontexto span{display: none}
  a.dcontexto:hover span{ 
  display:block;
  position:absolute;
  width:230px; 
  top:3em;
  right-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>
topo