Dicas para Criação e 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? 10 voto(s)