Postado por Rodrigo Monteiro, em 25/08/2011 na categoria 'css' 0 
Fala galera de Web da Microcamp!
Estou de volta com mais um assunto: barra de navegação com tooltip. Antes de iniciarmos o post, quero fazer uma indicação, o post “Como criar um menu com css” do professor César Farkas. Nesse post ele explica super bem como gerar um pequeno menu em css, e pode lhe ajudar muito a entender o assunto que vou tratar agora aqui.
Primeiro vamos entender, o que significa Tooltip?
Tool-tip: terminologia em inglês 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.
Agora vamos ao código. Iniciaremos com o código css que deverá ser digitado entre as tags <HEAD> </HEAD>.
———————————————————————————————-
<style type="text/css">
p.barNav {position:relative;}
/*abaixo estilizaremos o link estático de nossa página*/
.barNav a {
/*formatando tamanho e fonte*/
font: 12px Arial, Verdana,Helvetica,sans-serif;
/*formatando cor*/
color: #000000;
/*tirando qualquer decoração*/
text-decoration: none;
/*cor do fundo*/
background: #FFC50C;
text-align: center;
/*padding é a distância entre a moldura e o texto*/
padding: 1px 5px;
/*o margin-right está sendo usado para distância entre os links*/
margin-right:-1px;
border: 1px solid #000000;
}
/*agora a estilização do link sobre*/
.barNav a:hover {
color: #666666;
background: #FCFCFC;
border: 1px solid #666666;
}
/*display none abaixo está escondendo o conteúdo da tag span*/
.barNav a span {
display:none;
}
/*abaixo quando passar com o mouse sobre o link
o texto será mostrado*/
.barNav a:hover span {
display:block;
position: absolute;
/*posição em relação ao topo*/
top:40px;
/*posição em relação a esquerda*/
left:0;
/*altura da moldura*/
width: 200px;
/*distância entre moldura e texto*/
padding: 2px 0;
/*abaixo a formatação do texto com
cor, cor de fundo, borda e alinhamento*/
color: #666;
background:#fffff0;
font-size: 12px;
border:2px dotted #000;
text-align:center;
}
-->
</style>
———————————————————————————————-
O código css está todo comentado para facilitar o seu estudo e os comentários estão digitados dentro do comando /* e */ .
Para poder aplicar toda estilização vamos ao código HTML , que será feito dentro das tags <BODY> </BODY>.
———————————————————————————————-
<h3>BARRA DE NAVEGAÇÃO COM TOOL TIP </h3> <h3>Passe o mouse sobre os links</h3> <p> <a href="#" >Home<span>Página de entrada no site</span></a> <a href="#">Quem somos<span>Conheça nossa equipe. Profissionais de alto gabarito técnico integram nossos quadros </span></a> <a href="#">Portfólio<span>Uma coleção de nossos trabalhos e a opinião de clientes </span></a> <a href="#">Contato<span>Fale conosco. Sua opinião, sugestão ou crítica é muito importante para nós. </span></a> </p>
———————————————————————————————-
Observando o código HTML, o conteúdo a ser mostrado já está no código entre as Tags <SPAN> </SPAN>, mas só será mostrado quando o usuário passar com o mouse sobre o link da barra de navegação! Usando a criatividade você pode aplicar esse código em diversas situações.
Bom pessoal, espero que tenham gostado, agora é estudar, estudar, estudar….
Qualquer dúvida podem postar aqui mesmo no blog que terei o prazer de responder!
Abraços a todos e até a próxima!
