Tutorial - Tooltip personalizada

Yoo britânicas! ♥

Como vão? Eu estou super triste. Fiquei de recuperação em SEIS matérias! Eu to muito mal mesmo, mas eu sei que o erro foi meu, porque eu nunca estudava diariamente, e nem fazia lição, ou prestava atenção nas aulas. E por causa dessas coisas, consegui ficar de seis matérias, isso é algo que eu nunca imaginei. Nunca fiquei de recuperação de tanta matéria, mas, quem mandou eu deixar de estudar.

Meu medo é não conseguir recuperar essas notas nesse próximo bimestre. Torço que consiga, vou dar muito duro, e estudar muito. E por isso, não sei se vou conseguir postar todos os dias. Talvez no meio da semana, eu traga 1 ou 2 postagens, vamos ver né.

Mudando de assunto, vamos ao tutorial de hoje? Depois do tutorial, vou estudar, de verdade.

Algumas de vocês devem saber o que é Tooltip, outras não. Tooltip é aquela "legenda" quando você passa o mouse em algum link, como por exemplo nos afiliados, para ver o nome do blog. Isso é Tooltip, eu também nem sabia, só fui descobrir esses dias, e sempre fiquei com vontade de saber como fazia.

Já falando: Eu não sei direito de onde criaram esses tooltip's que vou mostrar à vocês. Mas eu acho que é do CandyLLand, então, créditos à eles.

Editar HTML > Ctrl + F3 > e procure por /body

Trouxe três Tooltip's para vocês, escolha um deles, e cole acima da tag que procurou.

Modelo 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>

Modelo 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>

Modelo 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>