Dicas para Criação de sites

Criando tooltips com CSS

Publicidade

Criando 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></head><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></html>

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".

Veja os Resultado:

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.

Publicidade

Postado por: Arthur Di Polito
Criação e Diagramação

Gostou dessa dica?4 voto(s)