25/11/2008
Por Fábio Antonio Izidio Ferreira
Irei mostrar como criar ToolTip (em português “dica de contexto”) usando técnicas CSS.
ToolTip são aquelas pequenas janelas que aparecem quando você passa o mouse sobre uma determinada palavra, tais janelas normalmente são usadas para mostrar o significado de uma palavra, uma descrição detalhada ou também para mostrar informações de ajuda para o usuário.
Como funciona?
A técnica se baseia em esconder o conteúdo do ToolTip utilizando a propriedade display:none, e no evento hover do elemento, aplicar a propriedade display:block para mostrar o ToolTip.
Exemplo
Segue abaixo um exemplo de utilização de um ToolTip.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de ToolTip com CSS</title>
<style type="text/css">
#texto {
font: 12px arial, verdana, helvetica, sans-serif;
margin-top:250px;
text-align:center;
}
a.dcontexto{
position:relative;
font:12px arial, verdana, helvetica, sans-serif;
padding:0;
color:#000;
text-decoration:none;
border-bottom:2px dotted #039;
cursor:help;
z-index:50;
font-weight:bold;
}
a.dcontexto:hover{
background:transparent;
z-index:55;
}
a.dcontexto span{
display:none;
}
a.dcontexto:hover span{
display:block;
position:absolute;
width:250px;
top:2em;
text-align:justify;
left:-7em;
font: 12px arial, verdana, helvetica, sans-serif;
padding:5px 10px;
border:1px solid #999;
background:#000000;
color:#FFF;
font-weight:bold
}
</style>
</head>
<body>
<div id="texto">
Este texto mostra um Tooltip quando o mouse passa por <a href="#" class="dcontexto">AQUI!!<span>Esta caixa de texto é exibida no evento hover. Podemos aplicar vários efeitos nesta caixa de texto, e assim tornar este ToolTip mais atrativo!!</span></a>
</div>
</body>
</html>
Esta apresentação reflete a opinião pessoal do autor sobre o tema, podendo não refletir a posição oficial do Portal Educação.
O Portal Educação possui uma equipe focada no trabalho de curadoria de conteúdo. Artigos em diversas áreas do conhecimento são produzidos e disponibilizados para profissionais, acadêmicos e interessados em adquirir conhecimento qualificado. O departamento de Conteúdo e Comunicação leva ao leitor informações de alto nível, recebidas e publicadas de colunistas externos e internos.
UOL CURSOS TECNOLOGIA EDUCACIONAL LTDA, com sede na cidade de São Paulo, SP, na Alameda Barão de Limeira, 425, 7º andar - Santa Cecília CEP 01202-001 CNPJ: 17.543.049/0001-93
