Criando tooltips com CSS
CSS - Criar tooltips com CSSCriando tooltips com CSS
Informação:
Tooltips (dicas de contexto em inglês) são janelas que surgem quando o mouse passa por cima de um elemento determinado, normalmente utilizados em textos ou imagens quando é necessário uma explicação mais detalhada sobre o item ou complementar alguma informação sem que seja necessário quebrar o fluxo do texto ou colocar legendas.
Nessa materia abordaremos uma maneira fácil de criar tooltips utilizando apenas comandos básciso de CSS sem a necessidade de javascripts.
Obs: Vale lembrar que os comandos citados nesta matéria funcionam em todos os navegadores sem distinção, sem a necessidade de prefixos.
O método:
O princípio básico que utilizaremos consiste em "esconder" o texto que queremos que apareça no tooltip utilizando o comando de CSS display:none para que ele apareça quando o mouse passar por cima do elemento determinado utilizando o comando display: Block.
Para que isso seja possível, iremos criar uma classe para que isso ocorra apenas em um local determinado e utilizaremos a tag span para determinar qual parte do texto será nosso tooltip.
Vejamos abaixo um exemplo de utilização.
<style>
a.tooltip{
position:relative;
font-size:12px;
color:#039;
text-decoration:none;
cursor:help;
}
a.tooltip:hover{
background:transparent;
color:#f00;
z-index:25;
}
a.tooltip span{
display: none;
}
a.tooltip:hover span{
display:block;
position:absolute;
width:210px;
top:20px;
left:0;
font-size: 12px;
padding:5px;
border:1px solid #999;
background:#e0ffff;
color:#000;
}
</style>
<body>
<p>Este é exemplo demonstrativo de utilização de
<a href="#" class="tooltip"><em><strong>Tooltips</em></strong>
<span>Exemplo de utilização de tooltips.</span></a>
e com isto fornecer mais uma ferramenta para seu website./p>
</body>
No exemplo acima é possível perceber que através da utilização da tag span para determinar qual parte do texto seria utilizada no tooltip e o comando display:none para determinar que ele seria vísivel apenas quando o cursor do mouse passasse por cima (:hover) da palavra "tooltip".
Este é um texto demonstrativo de utilização de Tooltips Exemplo de utilização de tooltips. e com isto fornecer mais uma ferramenta para seu website.
Criação e Diagramação
