24/11/2014

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://chiclete-funny.blogspot.com" title='Chiclete Funny'><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='https://db.tt/bTqrKtgt' 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 Reino Kawaii. A personalização no segundo código é bem simples, só editar ao gosto de cada um. Bejus >.<

2 comentários: