Modelos para Tooltip

Gotósooo

Hellow!! Encontrei mais tooltip personalizados!! Créditos vão para Part Of Me

Vem ver!!

Blogger, clique no nome do seu Blog - Modelo - Editar HTML - Pesquise por: </head>

Antes dessa tag, cole o código abaixo:

<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'/>

Colou? Agora é a hora da "Personalização".

Tooltip 1

Esse é o primeiro Tooltip, para aplicá-lo no seu Blog siga os passos:

Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:

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;
}

Tooltip 2

div#qTip {
padding: 3px;
border: 1px double #f5f5f5;
display: none;
background: #FA8072;
color: #ffffff; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;z-index: 1000;
border-radius: 10px 10px 0px 10px;
box-shadow: inset 0 0 8px #f5f5f5;
}

Tooltip 3

div#qTip {padding: 3px;display: none;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8u6_1V3kgwwE6U7jfyMy-fQ23memKjhWingC0RVnfLXLCpnlKXn-2bRS__PxRM-yyoBM8cCrity0UnxxT88QqGd5qpK3LlU1K_rXNvQWEcbyzGZDKIYrrdmlbprIreDalITs1GVuawjbb/s320/2r7pqqa.jpg);color: #FFFFFF; /* Cor do texto */font-family: Century Gothic; /* Fonte */font-size: 11px;text-align: left; /* Alinhamento do texto */position: absolute;z-index: 1000;border-radius: 10px;}

Tooltip 4

div#qTip {
padding: 3px;
display: none;
border: 1px solid #1874CD;
background: url(http://24.media.tumblr.com/tumblr_m8li27B93N1r44mhto1_500.png);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 2px;
}

Tooltip 5

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;
}

Beijos >3<