Script de Tooltip
Nesse tutorial vou ensinar a fazer um Tooltip. Pra quem não sabe tooltip é aquela moldura que abre quando você passa o mouse sobre um elemento HTML.
Antes de mais nada, guarde uma cópia do seu theme no seu computador, caso algo de errado venha à acontecer!
1º - Coloque esse código entre </style> e </head> :
<!--Tooltip por Igor Neves--> <div id="dhtmltooltip"></div> <script src="http://static.tumblr.com/2buhswq/Xysm02rrj/tooltip_best_of_themes.js" type="text/javascript"></script>
2º - Cole esse código no CSS do seu theme, ou seja entre <style> e </style> :
/**Tooltip por Igor Neves**/ #dhtmltooltip {z-index: 1000; position: fixed; visibility: hidden; width: auto; padding:5px; opacity:0.9; margin-left:0px; text-align: center; font-size: TAMANHO DA FONTEpx; border-radius: CURVA_DA_BORDApx; -webkit-border-radius: CURVA_DA_BORDApx; -moz-border-radius: CURVA_DA_BORDApx; border: 2px solid #COR DA BORDA; color: #COR DA FONTE; background:#COR DO BG; }
3º- Coloque esse código onde você quiser que o tooltip apareça:
onMouseover="ddrivetip('TEXTO QUE APARECERÁ NO TOOLTIP')"; onMouseout="hideddrivetip()"
Por exemplo, em uma imagem:
<img src="URL DA IMAGEM" class="CLASS DA IMAGEM" onMouseover="ddrivetip('TEXTO QUE APARECERÁ NO TOOLTIP')"; onMouseout="hideddrivetip()">
Ou Link:
<a href="URL"><div class="CLASS DO MENU" onMouseover="ddrivetip('TEXTO QUE APARECERÁ NO TOOLTIP')"; onMouseout="hideddrivetip()">LINK</div></a>
Tutorial por Igor Neves, se usar credite!