21 de nov de 2012

Personalizando o Tooltip

Hey, angels :) What's up?

Trouxe um tutorial bem útil para vocês: como personalizar o tooltip. Mas, antes de tudo, vocês sabem o que é Tooltip?


"Tooltip terminologia em inglês ou dica de contexto é aquela moldura pop-up que abre quando você passa o mouse sobre um elemento HTML (normalmente uma palavra em um texto ou uma imagem) e que contém uma explicação adicional sobre aquele elemento que recebeu o ponteiro do mouse sobre ele.
É utilizado em conjunto com um cursor, normalmente um ponteiro do mouse. O usuário pára o cursor sobre um item, sem clicar ele, e uma pequena "caixa hover" aparece com informações complementares relativas ao item."

Simplificando? É essa caixinha com o texto Postagens mais antigas:


Querem aprender a personalizar essa caixinha? É só clicar em "Leia Mais".

A primeira coisa a se fazer é ir em Modelo > Editar HTML. Lá, procure por </head> usando Ctrl + F.
ACIMA dessa tag, cole:
<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'/>
Depois, usando Ctrl + F novamente, busque por ]]></b:skin> .
Assim que achar, cole ANTES dessa tag:
div#qTip {
padding: 3px;
background: #eee5de; /* Cor de Fundo*/
color: #8b8378; /* Cor da Fonte */
position: absolute;
z-index: 1000;
border: 1px solid #8b8378; /* Cor da Borda */
display: none;
font: bold arial;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
O código já está bem explicado por si só:


#eee5de é a Cor do Fundo.
#8b8378 é a Cor da Letra.
#8b8378 é a Cor da Borda.

Alterem usando a Tabela de Cores.
Visualizem e se estiver correto, salvem. 

Para usar o Tooltip:

Na elite de afiliados já deve estar funcionando. Porém, para usar em outras circunstâncias, vocês vão precisar de alguns códigos.

Para links:
<a href='Link Aqui' title='Título do Link'>Nome do Link</a>
Para imagens:
<img src='URL da imagem' title='Nome da Imagem para Tooltip'/>
Personalizem como o mandado. Coloque os códigos na área de postagem trocando Escrever por HTML:


Parece ser meio trabalhoso, mas é muito fácil! 

Espero que tenham gostado e entendido. 
Beijos,

Mrs. Nightshade.

2 comentários:

  1. Olá! Amei o tutorial!! Não sabia o que era tooltip, mas você me ajudou de montão!!!

    Beijos!!

    ResponderExcluir
    Respostas
    1. Olá! Que bom que gostou :D Fico super feliz em ter ajudado :D

      Beijos!

      Excluir