clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

21/07/2017

Tutorial: 5 Modelos de Tooltip com efeito hover (01)


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.

~Abaixo se encontra a brevia de cada modelo~

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:
<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"
#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"
#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"
#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"
#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"
#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. 

Nenhum comentário:

Antes de sair, não esqueça de comentar!