Banner propaganda da DevMedia - Cursos de desenvolvimento web

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>

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo