Modelos de Tooltip com efeito hover [001]

Ohayoo bunnie's! Como vão? Sem muitas delongas hoje venho trazer um tutorial de personalização, lindos modelos com efeito para para Tooltip. Para quem não sabe o que é Tooltip, é um balão que aparece quando passamos o mouse, sobre alguma palavra, link ou imagem |Exemplo|. Abaixo deixei a brevia dos efeitos, é possível editar o corpo dele, como cores e fonte. Créditos ao blog Chuva de HTML, no qual criou os modelos e apenas decidi compartilhar com vocês.

Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

1. Para o efeito Tooltip funcionar é necessário colocar adicionar um código acima de , então vá em HTML do seu blog e acima de </body> cole o seguinte código:

Códigos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>
<script src='https://sites.google.com/site/webunnycrazy/c/jquery.style-my-tooltips.js' type='text/javascript'/>
<script>(function($){$(document).ready(function(){$(&quot;[title]&quot;).style_my_tooltips(); });})(jQuery);</script>

Se você já tiver estalado um código similar para ativar o tooltip, pule essa parte. E siga o tutorial abaixo.

2. Abaixo se encontra cinco modelos de Tooltip, escolha um deles (é possível ver eles na brevia mas acima na postagem) e copie um dos códigos abaixo (de acordo com qual escolheu), procure por /b:skin e acima dele cole o código do modelo que escolheu. Salve e prontinho!

Modelo 1 - "Zoom continuo"

Códigos

#s-m-t-tooltip {
-webkit-animation: ToolZoom 1s infinite;
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}
@-webkit-keyframes ToolZoom {
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(1.09);}
100% {-webkit-transform: scale(1);}
}

Modelo 2 -  "Repercussão"

Códigos

#s-m-t-tooltip {
-webkit-animation: ToolRebote 1s infinite;
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}
@-webkit-keyframes ToolRebote {
0% {-webkit-transform: scale(.3);}
50% {-webkit-transform: scale(1.05);}
70% {-webkit-transform: scale(.9);}
100% {-webkit-transform: scale(1);}
}

Modelo 3 - "Giro vertical"

Códigos

#s-m-t-tooltip {
-webkit-animation: ToolVertical 1s infinite;
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}
@-webkit-keyframes ToolVertical {
0%   {-webkit-transform: rotateX(0deg);}
100% {-webkit-transform: rotateX(360deg);}
}

Modelo 4 - "Giro horizontal duplo"

Códigos

#s-m-t-tooltip {
-webkit-animation: ToolHorizontal 1s infinite;
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}
@-webkit-keyframes ToolHorizontal {
0%   {-webkit-transform: rotatey(0deg);}
50% {-webkit-transform: rotatey(360deg);}
100% {-webkit-transform: rotatey(0deg);}
}

Modelo 5 -  "Vai e volta"

Códigos

#s-m-t-tooltip {
-webkit-animation: ToolGiro 1s infinite;
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}
@-webkit-keyframes ToolGiro {
0%   {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(360deg);}
100% {-webkit-transform: rotate(0deg);}
}

Agora salve e verifique o efeito. Se não gostou experimente outro modelo, é possível editar suas cores e fonte ao seu gosto. Também tenho outros tutoriais e modelos de tooltip no blog, basta dar uma pesquisada. Enfim é isso. 

# Geralmente a tag da tooltip começa com sto: div#qTip {, mas nesse começa com #s-m-t-tooltip apesar disso não interfere na funcionalidade do código.