Tooltip com efeito hover

Segundo e último tutorial de hoje, ok?

Achei este tutorial num blog que credito pouco à frente, e embora tenha adaptado grande parte das explicações, a Melodie merece reconhecimento porque eu NEM SABIA que era possível a tooltip ter hover, ninguém usa, embora faça todo o sentido. Eu tenho usado muito nos meus layout ultimamente, acho que fica engraçado, e decidi dar uma ajudinha a divulgar este efeito giríssimo. Sem mais delongas...

Como colocar a tooltip normal

Procure por </body> e cole em cima:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>

<script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>

<script>(function($){$(document).ready(function(){$(&quot;[title]&quot;).style_my_tooltips(); });})(jQuery);</script>

Agora, procure por /b:skin e cole em cima o seguinte código:

#s-m-t-tooltip {

background: #444;

color: #eee;

font-family: calibri;

font-size: 9px;

letter-spacing: 1px;

border: 0px solid #fff;

border-radius: 0px;

text-transform: uppercase;

line-height: 11px;

text-align: center;

display: block;

padding: 10px 15px 10px 15px;

margin: 20px 10px 0px 10px;

z-index: 999;

}

» Nota: É habitual a primeira linha ter, em vez do que está escrito, isto: div#qTip { «

Disponibilizarei modelos em breve, por enquanto contentem-se em usar os que já há noutros blogs.

Efeitos hover [esta parte foi inteiramente tirada daqui: www]

O interessante aqui é que você pode criar o seu próprio efeito, desta forma seu tooltip ficará ainda mais original. Mas, se você não está com paciência para pensar em algo funcional, deixo cinco exemplo bem bonitinhos que a Melodie criou:

• Efeito "Zoom continuo": Prévia.
• Efeito "Repercussão": Prévia.
• Efeito "Giro vertical": Prévia.
• Efeito "Giro horizontal duplo": Prévia.
• Efeito "Vai e volta": Prévia.

[Eu novamente a falar]

Os códigos, na própria prévia devem ser colocados acima de /b:skin .
Explicando: o que realmente interessa para adicionar o efeito hover, é adicionar -webkit-animation: ToolRebote 1.5s; na parte da personalização da tooltip, e depois a área correspondente a @-webkit-keyframes ToolRebote {

Aqui estão quatro linhas que acho que devem colocar na personalização da tooltip, antes de fechar a chaveta (as duas últimas são extremamente importantes. Embora nos modelos disponibilizados pela Melodie tenham "display: block; ", é importante que fique "display: none;"):

margin: 2px;
padding: 4px 8px 5px 10px;
display: none;
position: absolute;

Espero que tenham gostado ^^