Sonifera Girl: 18. Tutorial - Tooltip: Mensagem ao Passar o Mouse

Oi! Finalmente, FÉRIAS! Bem, as férias verdadeiras começam segunda, mas eu tô de férias porque não fiquei de recuperação em NADA e tô livre, salva.

Bem, vamos lá. Eu estava pensando que em vez de uma onda gigantesca de Photoshop ou utilitários ou tutoriais, decidi que seria melhor postar um tutorial, um utilitário, um pedido da ask... assim, não vai ficar muito chato.

Vamos ao post. Eu vim ensinar a personalizar a tooltip e a pegar um pronta e colocar. Eu aprendi no CB e no GC, crédito aos dois.

Pra quem não sabe o que é tooltip, é isso aqui, ó:

Passe o Mouse

Vamos lá???

Eu vou ensinar primeiro a você personalizar, ou seja, criar a sua. Créditos ao Cherry Bomb por ter me ensinado.

1. Vá no seu HTML e procure por <head>. Cole abaixo dessa tag 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://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>

2. Agora procure por ]]></b:skin> e cole esse código acima dessa tag:

div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/
}

Mude as cores, a fonte, a borda, tudo de acordo com a paleta do seu blog e salve.

Agora, trago uns modelinhos do Garotas Cupcakes para tooltips e o jeito de coloca-lás:

1. Escolha um dos modelos abaixo de tooltip e procure por </body>. acima dessa tag cole o código da sua tooltip:

Tooltip 1

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:bold 10px 'verdana';margin:17px 0;padding:3px 25px;display:none;background:#fff url(http://4.bp.blogspot.com/-7BFeVaO2a-o/TyR4UER99oI/AAAAAAAAA3o/2rZfhjBk2WU/s1600/a.gif)no-repeat 5%;text-align:left;position:absolute;z-index:1000;color:#f9b;box-shadow:0 1px 3px #ccc;border-radius:4px}</style>

Tooltip 2

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip {font:bold 10px 'verdana';margin:17px 0;padding:3px 25px;display:none;background:#fee url(http://4.bp.blogspot.com/-3EIJVRWuVLQ/TyoLQkHA9JI/AAAAAAAAA_0/bKWPw5HBNa4/s1600/65miniflormagiagifsrm4.gif)no-repeat 5%;text-align:left;position:absolute;z-index:1000;color:#f9b;box-shadow:0 1px 3px #ccc;border-radius:4px}
</style>

Tooltip 3

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip {font:bold 10px 'verdana';margin:17px 0;padding:3px 25px;display:none;background:#eee url(http://2.bp.blogspot.com/--QGMjDUMOro/TyqmVxWifKI/AAAAAAAABAM/HggMWWP_DMI/s1600/virtual-cahveiga.gif)no-repeat 5%;text-align:left;position:absolute;z-index:1000;color:#888;box-shadow:0 1px 3px #ccc;border-radius:4px}</style>

Tooltip 4

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip {font:bold 10px 'verdana';margin:17px 0;padding:3px 35px;display:none;background:#e1cdff url(http://2.bp.blogspot.com/-7adVbZRyVP0/TyqnFcaRBcI/AAAAAAAABAU/jqbm_kztoug/s1600/886.gif)no-repeat 5%;text-align:left;position:absolute;z-index:1000;color:#fff;box-shadow:0 1px 3px #ccc;border-radius:4px}</style>

Tooltip 5

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>
div#qTip {font:bold 10px 'verdana';margin:17px 0;padding:3px 35px;display:none;background:#ffc url(http://1.bp.blogspot.com/-mVAld0yCxS0/Tyqn09bg2aI/AAAAAAAABAc/YKZUjSTXT8c/s1600/2242.gif)no-repeat 5%;text-align:left;position:absolute;z-index:1000;color:#876e59;text-shadow:0 1px #fff;box-shadow:0 1px 3px #ccc;border-radius:4px}</style>

Para os dois jeitos, tanto o da tag </body> quanto o da tag ]]></b:skin>, precisamos do mesmo código, que é colocado pelo HTMl da postagem, que é mudar o "Escrever" para "HTML" e adicionar esse código abaixo no lugar onde quiser que apareça:

<a href='URL do blog ou site que será redirecionado' title='O texto da Tooltip'>O link que aparece no texto</a>

Simples, não?

Espero que tenham gostado!

Beijos!

Nenhum comentário:

Postar um comentário

Oie! Pro favor comentem nos posts, e por favor não xinguem nem sejam mal educados. Aceito críticas, ideias, elogios e tudo mais, mas com educação! E sigam o blog pf minha meta é de 100 seguidores, ajudem pf...

Be happy!

웃 ღ ♥ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖ ｡◕‿◕｡®™ ✾
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿
✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ♥
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ●••●♪♫♩♫♭♪ ʚĭɞ ☁
●▂●　●０●　●︿●　●ω●　●﹏●　●△● ●▽●