28 de nov de 2012

Tutorial: Personalizar Tooltip


Oláá pessoal!!
Tudo bom??

Bom, eu estava procurando por aí um tutorial por aí pra postar pra vocês, quado um ótimo tutorial caiu bem na minha frente. Bom, eu trouxe pra vocês, claro. Mas confesso que fiquei com um pouco de ciuminho -.-'

Um tooltip é isso:


Esse tutorial, é um que eu achei no blog Cupcake de Chocolate. Espero que gostem!! A Isa, postou alguns modelos de vários blogs pra vocês usarem. 

Primeiro você vai em Modelo > Editar HTML > Ctrl + F e procure por 
</head>
 Acima dele cole esse código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>


Agora, procure por: ]] e acima dele cole o código do tooltip desejado:


div#qTip {margin:3px;padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#FF69B4;
background: #fdfdfd;
font-family: handy;
font-size: 8px;
background:#fff url(http://i11.photobucket.com/albums/a168/evelynregly/mini_gifs/mini_gifs80.gif)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
text-transform: uppercase;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}





div#qTip {margin:3px;padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;

display: none;
color:#000000;
background: #F5F5F5;
font-family: handy;
font-size: 8px;
background:#F5F5F5 url(http://static.tumblr.com/rltvkjt/Dnzlmr3zf/pandabear.gif)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
text-transform: uppercase;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}






/** Tooltip Girl: By the Baby **/div#qTip {padding: 7px;border-left: 3px solid #000; /* Cor da borda lateral esquerda */
border-right: 3px solid #000; /* Cor da borda lateral direita */

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-bottom-width: 0px;
display: none;
background: #f5f5f5;/* Cor do fundo do tooltip */
color: #000000;
font-family: Century Gothic;
font-size: 14px;
text-align: left;
position: absolute;
z-index: 1000;
}





/** Tooltip love: By the Baby **/div#qTip {padding: 7px;
border: 3px solid #000;

border-right-width: 0px;
border-bottom-width: 0px;
display: none;
background: #f5f5f5; /* cor do fundo do tooltip */
color: #000000;
font-family: Century Gothic;
font-size: 14px;
text-align: left;
position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 1000;
}







/** Tooltip smile: By the Baby **/div#qTip {padding: 7px;
border-top: 3px solid #000;

border-right-width: 0px;
border-bottom-width: 0px;
display: none;
background: #f5f5f5; /* cor do fundo do tooltip */
color: #000000;
font-family: Century Gothic;
font-size: 14px;
text-align: left;
position: absolute;
z-index: 1000;
}





/** Tooltip simples: By the Baby **/div#qTip {padding: 7px;border: 1px solid #bebebe;
border-left: 5px solid #000;

display: none;
background: #f5f5f5; /* cor do fundo do tooltip */
color: #000000;
font-family: Century Gothic;
font-size: 14px;
text-align: left;
position: absolute;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
z-index: 1000;
}






/** Tooltip baby: By the Baby **/div#qTip {padding: 7px;border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #bebebe;
border-left: 3px solid #ff34b3;
border-right: 3px solid #ff34b3;
display: none;
background: #f5f5f5; /* cor do fundo do tooltip */
color: #000000;
font-family: Century Gothic;
font-size: 14px;
text-align: left;
position: absolute;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
z-index: 1000;
}






div#qTip {margin:8px;padding: 5px 5px;display: none;
color:#68BAED;
background: #
FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
font: Tahoma;
font-size: 11px;
background:#ffff;
text-align: center;
position: absolute;
z-index: 1000;
box-shadow: 1px 0 1px #7AC4F5;
}










div#qTip {padding: 4px;border-right-width: 1px;
border-bottom-width: 1px;
display: none;
background: #ffffff; ---/* cor do fundo */
color: #a5d1f2; ---/* cor do texto */
font: Verdana;
font-size: 10px; /* tamanho da fonte */
text-align: left;
position: absolute;
z-index: 1000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

É isso...
*Pra informação de vocês, não fiquei de recuperação em nenhuma prova, então, mais tempo pra postar ;D*

Beijos!!

2 comentários:

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!