
Dicas para Criação de sites
Criando tooltips com CSS
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.
Criação e Diagramação
Assine nosso feeds e receba notícias todas semanas
Outras Soluções
Últimos Clientes
[veja todos]

JK Baterias

FabriLar Casas
