11.12.15

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:
[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 ^^

2 comentários:

  1. Como é que ninguém comentou isso? Chessus T^T que efeitos lindos *-----* Estou babando em todos, já fiz tooltips assim em meu blog e acho super lindo e super diferente! Amei os efeitos e parabéns, seu blog e tudo o que cria é muito lindo ;) Beijos! =3

    ResponderEliminar
  2. Olá, estou a tempos tentando instalar este efeito em meu blog, mas ele tem uma problema que não sei como solucionar. O efeito ficar rodando sem parar e fica impossivel ler o conteúdo do tooltip. POderia dar uma olhada? Obrigado, bonito efeito.

    ResponderEliminar