O que é tooltip?
Tooltip é um recado de quando se passa o mouse em algo. Exemplo (de um já personalizado):
Exemplo de um não personalizado:
Como instalar?
- Vá no seu blog e em "Modelo" > "Editar HTML" e procure por ]]></b:skin>
- Cole o seguinte código acima:
div#qTip {
padding: 8px;
border: 1px solid #14395b; /* cor, expressura, e estilo da borda */border-right-width: 1px;
border-bottom-width: 1px;
display: none; /* não mexa */background: #5f89a9; /* cor do fundo */color: #FFF; /* cor do texto */font: Verdana; /* fonte do texto */font-size: 10px; /* tamanho da fonte */text-align: left; /* alinhamento do texto - troque por center ou right se quiser */position: absolute; /* não mexa */z-index: 1000; /* não mexa */-webkit-border-radius: 4px; /* arredondamento da borda, apague se não quiser */-moz-border-radius: 4px; /* arredondamento da borda, apague se não quiser */border-radius: 4px; /* arredondamento da borda, apague se não quiser */}
O código é auto-explicativo.
Como editar do meu jeito, sendo que meu blog já tem um personalizado?
- Vá em Editar HTML e procure por div#qTip {
- Edite o resto do código até }
Modelos de tooltip
Procure por <head> e abaixo cole:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'></script>
Depois, cole os seguintes códigos acima de ]]></b:skin>
Modelo 1 - Créditos
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
text-shadow: 1px 1px 0px #ccc6e8;
display: none;
color:#fff;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #dcd8ef;
border: solid 1px #ccc6e8;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}
Modelo 2 - Créditos
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
text-shadow: 1px 1px 0px #f7cedd;
display: none;
color:#FFF;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #fce3ec;
border: solid 1px #f7cedd;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}
Modelo 3 - Créditos
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#fff;
background: #9bb3bc;
box-shadow: inset 0 0 20px #5ea0b9, 0 0 10px #ccc;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
Modelo 4 - Créditos
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#fff;
background: -moz-linear-gradient(
top,
#c7abc7 0%,
#d49dbe);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c7abc7),
to(#d49dbe));
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #a680a8;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
-webkit-box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
}
Modelo 5 - Créditos
div#qTip {
padding: 3px;
border: 2px solid #A2CD5A;
display: none;
background: transparent url(http://media.tumblr.com/tumblr_mej6isPoDA1r16se4.png);
color: #696969; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
}
Modelo 6 - Créditos
div#qTip {
margin:2px;
padding: 5px 5px 5px 25px;
display: none;
color:#78a7c8;
background: #fdfdfd;
border: 1px solid #F5F5F5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font: Century Gothic;
font-size: 10px;
background:#fff url(http://media.tumblr.com/tumblr_lx9va28WQZ1qmyqtl.png)
no-repeat;
text-align: left;
position: absolute;
z-index: 1000;
}
Como utilizar?
Para colocar em um link, assim ❤
.
<a href="LINK" title="TEXTO DO TOOLTIP">TEXTO</a>Para colocar em uma imagem, assim:
<a href="LINK" title="TEXTO DO TOOLTIP"><img src="LINK DA IMAGEM"/>
Posted by:
Nenhum comentário:
Postar um comentário