Olá sweets!!! Primeiro vou me desculpar novamente por não está postando diariamente aqui no blog, pois eu tenho muitos deveres da escola, então fico muito atarefada e também estou sem a minima ideia do que postar, já respondi todos os pedidos de tutorial lá da ask, mas me lembrei de um pedido que foi feito a muito e que eu respondi, mas não trouxe o tutorial, trouxe modelos de tooltip (quem quiser ver clique aqui).
Agora vamos ao tutorial
Pra quem não sabe tooltip é nada mais nada menos que aquele texto que aparece dentro de uma caixa quando passamos o mouse por cima de um link com algum tipo de descrição. Exemplo:
Para que o seu tooltip funcione procure por </head> e cole o seguinte código acima dessa tag:
<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'/>
Num bloco de notas ou se quiser fazer direto na caixa de HTML (]]></b:skin>) cole o seguinte código:
div#qTip {}
Entre {} cole esse código
padding: 6px;Explicando os trechos importantes:
display: none;
background: #000;
color: #fff;
font: bold 8px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
Onde está escrito background: #000; é a cor do fundo do tooltip.
Onde está escrito color: #fff; é a cor da fonte.
Onde está escrito font: bold 8px Verdana, Arial, sans-serif; é o estilo, tamanho e tipo da fonte.
No lugar de bold, você pode colocar normal e italic
Só com esse código ele já fica pronto, mas vamos personalizar do nosso jeito.
Para colocar uma borda ao redor coloque o seguinte código abaixo de padding: 6px;
border: 1px solid #COR DA BORDA;
Para deixar as bordas arredondadas:
border-radius: 5px;
Para deixar uma sombra na fonte:
text-shadow: 1px 1px 0px #eee;
E para outras personalizações é só ir adicionando códigos tipo de algum menu, blockquote, entre outros até ficar do jeito que você quiser.
OBS.: O Tooltip personalizado só irá aparecer quando a página estiver totalmente carregada.
Espero que tenha ajudado e qualquer tutorial é só pedir na ask que está ali no menu.
