Script de Tooltip

Este script é como se fosse um title personalizado, é uma espécie de indicação adicional sobre o que se encontra numa aba do menu, descrição de uma imagem, etc. Foi desenvolvido originalmente pelo Dynamic Drive, contudo estes códigos foram hospedados e editados por mim, se usares credita! Podes visualizar um exemplo personalizado de tooltip, aqui.

Para começar, cola este código no teu CSS (o css situa-se entre <style> e </style>) :

/****** tooltip by ritamafalda */
#dhtmltooltip{position: absolute; background: #COR DE FUNDO; padding: 3px; font-family: FONTE;  color: #COR DA FONTE; visibility: hidden; z-index: 300; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}

Podes adicionar os códigos de personalização que quiseres a este código, tais como padding, border radius, opacidade, etc. Para que o código funcione só precisas de alterar o que está a negrito. Para uma lista das fontes que podes usar sem ser preciso mais códigos, consulta este site.

Em seguida, coloca este código logo a seguir a <body> :

<div id="dhtmltooltip"></div><script language="JavaScript" src="http://static.tumblr.com/xajwmek/wC6lsg2fd/titlediferenciado_ritamafalda.txt"></script>

Agora é só aplicar o tooltip! Aqui está o código base que pode ser aplicado a qualquer coisa que comece com < e acabe com > (como por exemplo uma <div>), basta colocar o código entre eles:

onMouseover="ddrivetip('O QUE QUER QUE APAREÇA NA ABA')"; onMouseout="hideddrivetip()"

Se quiseres numa imagem, coloca assim o código:

<img src="LINKDAIMAGEM" onMouseover="ddrivetip('O QUE QUER QUE APAREÇA NA ABA')"; onMouseout="hideddrivetip()">

Se quiseres colocar, por exemplo, num menu, o código tem de ficar assim:

<div class="CLASSDOMENU" onMouseover="ddrivetip('O QUE QUER QUE APAREÇA NA ABA')"; onMouseout="hideddrivetip()" > O QUE QUISER </div>

E pronto, é só substituíres os negritos e o tooltip funcionará na perfeição! 

500 notes reblog ♥
top