Contrução de uma barra de navegação CSS com tool-tip
Publicado em: 30/07/2004Introdução
Neste tutorial vou mostrar uma técnica para construção de tool-tip em uma barra de navegação com uso das CSS.
Ao final da leitura deste tutorial você estará capacitado a criar tool-tip com uso das CSS.
O que é tool-tip ?
Tool-tip ou dica de contexto é aquela moldura pop up que abre quando você passa o mouse sobre um elemento HTML (normalmente uma palavra em um texto) e que contém uma explicação adicional sobre aquele elemento que recebeu o ponteiro do mouse sobre ele.
Repouse o ponteiro do mouse sobre esta palavra para ver uma dica de contexto.
A barra de navegação
Vamos usar neste tutorial a barra de navegação mostrada neste tutorial
A seguir o código completo da página contendo a barra de navegação daquele tutorial e na qual iremos acresentar as tool-tips.
<html>
<head>
<title>Barra de Navegação</title>
<style type="text/css">
.barNav a {
font: 12px Arial, Verdana,Helvetica,sans-serif;
color: #000000;
text-decoration: none;
background: #FFC50C;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 1px solid #000000;
}
.barNav a:hover {
color: #666666;
background: #FCFCFC;
border: 1px solid #666666;
}
-->
</style>
</head>
<body>
<p class="barNav">
<a href="caminho/arquivo.html" >Home</a>
<a href="caminho/arquivo.html">Quem somos</a>
<a href="caminho/arquivo.html">Portfólio</a>
<a href="caminho/arquivo.html">Contato</a>
</p>
</body>
</html>
A barra de navegação renderizada no browser
A técnica para a criação das tool-tips
Vamos dar uma olhada na barra de navegação com as tool-tips antes de mostrar as técnicas para a criação.
Veja a barra de navegação pronta com as tool-tips.
Você observou que ao passar o ponteiro do mouse sobre um item do menu, surge uma "caixa" com uma dica explicando suscintamente o link. Trata-se de uma dica de contexto ou tool-tip.
O efeito de fazer aparecer e desaparecer a dica é conseguido com uso da propriedade CSS display.
Vamos usar a propriedade display com os valores none e block.
display: none; esconde
display: block; mostra o elemento em nível de bloco.
E estes valores associados aos estados "UP" (em repouso) e "OVER" (com o ponteiro do mouse em cima) do link.
A tool-tip no código HTML
Nosso primeiro passo será colocar o texto da tool-tip de cada um dos links no código HTML.
Observe a tool-tip para o link Home:
<a href="caminho/arquivo.html"> Home<span>Página de entrada no site</span> </a>
Colocamos o texto da tool-tip dentro de uma tag <span> e esta por sua vez dentro da tag <a> do link.
Assim para toda a barra de navegação o código com o acréscimo das tool-tips é:
<a href="caminho/arquivo.html" >Home <span>Página de entrada no site</span> </a> <a href="caminho/arquivo.html" >Quem somos <span>Conheça nossa equipe.Profissionais de alto gabarito técnico integram nossos quadros</span> </a> <a href="caminho/arquivo.html" >Portfólio <span>Uma coleção de nossos trabalhos e a opinião de clientes</span> </a> <a href="caminho/arquivo.html" >Contato <span>Fale conosco. Sua opinião, sugestão ou crítica é muito importante para nós.</span> </a>
Veja o efeito do acréscimo das tool-tips no código ainda, sem estilização.
"Escondendo" as tool-tips
A regra CSS para esconder já foi explicada lá em cima no tutorial.
Veja:
.barNav a span { /* seletor contextual */
display:none; /* esconde */
}
Mostrando as tool-tips
A regra CSS para mostrar já foi explicada lá em cima no tutorial.
Veja:
.barNav a:hover span { /* seletor contextual */
display: block; /* mostra como bloco */
}
Veja o efeito do acréscimo destas duas regras.
Ops! Não há nada de errado com seu browser.
A tool-tip está funcionando. Colocando o ponteiro do mouse sobre os links "aparece" retirando o ponteiro "desaparece". Certo?
Mas, as coisas estão um caos! A tool-tip precisa ser posicionada corretamente.
Mais CSS nelas!
E aqui entra em ação a propriedade position, combinada com left e top.
Vamos acrescentar mais regras CSS:
.barNav a:hover span {
display: block;
position: absolute; /* posiciona em relação a tela do monitor */
top:40px; /* distancia para o topo da tela */
left:0; /* distância para a esquerda da tela */
}
Veja o efeito do acréscimo de mais estas regras.
Ops! Conseguimos progredir!
Já não está tão confuso como no anterior.
Mas seria interessante se conseguíssemos posicionar as tool-tips em relação a barra de navegação e não em relação a tela como fizemos.
Lembrando que um elemento posiciona-se em relação ao seu elemento ancestral que esteja posicionado, basta posicionarmos o elemento que contém a barra de navegação (ancestral da tool-tip).
Olhando no código lá em cima este elemento é o <p> da classe .barNav
isto é, temos que posicionar p.barNav
Assim:
p.barNav {
position:relative;
}
Veja o efeito do acréscimo de mais esta regra.
Ops! Progredimos mais ainda
As tool-tip está alinhada com a esquerda da barra e a 40px abaixo dela.
O toque final
Para finalizar vamos acresentar umas regras CSS a mais, para criar uma caixinha com fundo, borda e largura para a tooltip.
Veja a seguir:
.barNav a:hover span {
display: block;
position: absolute;
top:40px;
left:0;
width: 200px;
padding: 2px 0;
color: #666;
background:#fffff0;
font-size: 12px;
border:2px dotted #000;
text-align:center;
}
E completamos nossa estilização e o tutorial.
Ver a barra pronta com tool-tip mais uma vez.
Um exemplo prático.
No meu site de tutoriais Fireworks uso esta técnica tool tip no menu da coluna direita, para uma explicação suscinta do conteúdo de cada tutorial e ainda coloquei na janela do tool tip uma figurinha.
Confira no site o tool tip. Vá ao site e passe o ponteiro do mouse sobre os itens do menu a direita.
Ver o exemplo no site de tutoriais FW
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
