fev201019

John Marques

0

Um Simples Tooltip com CSS

Eai pessoal blz?!

Então seguinte vou mostrar como fazer um tooltip simples em CSS, usando apenas três classes de CSS, então mãos a obra.

primeiro vamos colocar o código html bem simples

<a href="#" class="tooltip">Tooltip
 <span>Descrição do link</span>
</a>

observe que dentro da tag A tem uma tag SPAN é ela que servirá para fazermos o tooltip.

Agora vem a CSS

body {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
}
a.tooltip,
a.tooltip span,
a.tooltip:hover span {
 text-decoration:none; /* tira o underline do texto */
}
a.tooltip span {
 display:none; /* não exibe o span*/
}
/* No momento que se passa o mouse sob o link  */
a.tooltip:hover span {
 display:inline; /* Em linha */
 position:absolute;
 z-index:1; /* Nível da camada*/
 padding:5px;
 width:200px; /* largura */
 height:18px; /* altura */
 margin: 25px 0 0 -30px; /* aqui você vai posicionar o span em relação ao link */
 background:#f5f5f5; /* cor de fundo */
 border:1px solid #CCC; /* borda */
}

Seguinte o lance ta no seguinte primeiro tirá a visualização do span e no momento que se passa o mouse colocar para seja visualizado e nesse momento colocar ele em linha com o link e depois posicionar de acordo com o link, para entender o posicionamento veja a imagem abaixo(não sou bom com desenho, mas vou tentar, rs).

Então pessoal é isso espero que ajude em algo, se procurar na Google vai achar um penca de coisa falando sobre o assunto, e recomendo o Maujor.com, em CSS, putz tem coisa pra caramba lá.

Abraços,

John Marques