Tooltip


Oie...eu trouxe para vocês um modelinho de tooltip e o tutorial de como criar o seu. É bem simples. Mas o que é tooltip? Bem, é isso aqui:
 Essa mini legenda que aparece toda vez que passamos o mouse em um link, imagem, textos...ou em qualquer lugar em que estiver aplicado. Essa legenda pode ser automática, como em links de Leia Mais, links de navegação, ou aplicada em algo com texto definido por você, como na imagem ao lado, quando se usa title, por exemplo:
<a href="http://reinokawaii.blogspot.com" title='Reino Kawaii'><img src="URL-DA-IMAGEM"></a> 
Vamos ao tutorial.
1. Entre em Modelo - Editar HTML - procure por </head> e cole esse script:
 <script language='JavaScript' src='http://kawaiiicode.github.io/tooltip.js' type='text/JavaScript'/>

2. Cole esse código acima de /b:skin:
 div#qTip {
padding: 3px;
border: 1px dashed #fff;
display: none;
background: #fcc;
color: #fff;
text-shadow: 1px 2px 3px #bbb;
font: bold 9px Tahoma;
text-align: center;
position: absolute;
z-index: 1000;
}

Visualize para ver o efeito e salve. Se quiser hospedar o script, clique aqui. Eu o encontrei no Mundo Blogger. A personalização no segundo código é bem simples, só editar ao gosto de cada um. Bjus.

1 Comments

  1. Unknown21 novembro

    Adoreii! Só que nesse código " /b:skin" seria esse ]]> ??

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up