Olá corações, como vão?? Eu estou muito bem, bom, só um pouco cansada, mas em fim... Eu encontrei alguns modelos super fofos para Tooltip , são 5 modelos super lindos. Bom, os créditos vão para o blog The Moon Reverse. Bejus >3< lindros
Você Não Sabe o Que É um Tooltip?? Clique Aqui
Você Não Sabe o Que É um Tooltip?? Clique Aqui
01. Cole esse código acima de <head>
01. Cole o código do blockquote abaixo, acima de ]]></b:skin>
01. Cole o código do blockquote abaixo, acima de ]]></b:skin>
01. Cole o código do blockquote abaixo, acima de ]]></b:skin>
01. Cole o código do blockquote abaixo, acima de ]]></b:skin>
01. Cole o código do blockquote abaixo, acima de ]]></b:skin>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" src="//yourjavascript.com/1411249631/qTip.js" type="text/JavaScript"></script>
Modelo 01
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #f9cfe1;
background: -moz-linear-gradient(top, #f9cfe1 0%, #efacc8 85%, #f4bcd3 87%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9cfe1), color-stop(85%,#efacc8), color-stop(87%,#f4bcd3));
background: -webkit-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: -o-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: -ms-linear-gradient(top, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: linear-gradient(to bottom, #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9cfe1', endColorstr='#f4bcd3',GradientType=0 );
box-shadow: inset 1px 1px 0 #ffe4ef;
border: 1px solid #dfa1bb;
padding: 6px;
font-family: "arial";
font-size: 10px;
color: #fff;
text-shadow: 1px 1px 0 #d689a9;
}
Modelo 02
@font-face { font-family: "littlefont"; src: url('http://static.tumblr.com/4yxykdm/NMJlre6xz/04b_03___1_.ttf'); }
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #606060;
box-shadow: 3px 3px 2px #f3f3f3;
padding: 6px;
font-family: "littlefont";
text-transform: uppercase;
font-size: 8px;
color: #e1e1e1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Modelo 03
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 19%, #e5e5e5 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,#f4f4f4), color-stop(99%,#e5e5e5));
background: -webkit-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%);
background: -o-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%);
background: -ms-linear-gradient(top, #f4f4f4 19%,#e5e5e5 99%);
background: linear-gradient(to bottom, #f4f4f4 19%,#e5e5e5 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e5e5e5',GradientType=0 );
box-shadow: inset 1px 1px 0 #fff;
border: 1px solid #d1d1d1;
padding: 4px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 12px;
color: #bcbcbc;
text-shadow: 1px 1px 0 #fafafa;
}
Modelo 04
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #d0dbe4;
background: -moz-linear-gradient(top, #d0dbe4 0%, #e1e7ed 51%, #d0dbe4 51%, #d0dbe4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(51%,#e1e7ed), color-stop(51%,#d0dbe4), color-stop(100%,#d0dbe4));
background: -webkit-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: -o-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: -ms-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: linear-gradient(to bottom, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#d0dbe4',GradientType=0 );
box-shadow: inset 1px 1px 0 #eaf0f4;
border: 1px solid #bdccd8;
padding: 4px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 0 #bdccd8;
}
Modelo 05
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #cecfd3;
box-shadow: inset 0 0 4px #babdca;
padding: 6px;
font-family: "silkscreen";
font-size: 8px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 0 #a8acbf;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 10px;
text-transform: uppercase;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
}
Nenhum comentário:
Postar um comentário