Download tooltip with shadow


Put this into your <HEAD> section

Put this into your <BODY> section


The tooltip is displayed by use of a plain <A> tag. Example:

<a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Text of tooltip');return false">Roll over me</a>

The "showTooltip" function is called when someone moves their mouse over the link. This function takes two arguments:

  • event = Always the first argument
  • "Text of tooltip" = The text you want to be displayed in the tooltip

The "hideTooltip" function hides the tooltip when the user moves the mouse cursor away from the link


Is it possible to have the tooltip from a text file?
Any example?
Adrian at 10:55AM, 2011/03/28.
Juan Gabriel Aldana Jaramillo

I inserted the "tooltip with shadow" code into my Web page and it is working fine but I am having a problem when I use Chrome:
When the web page is just loaded I put the cursor over the link and the text box opens next to the cursor, this is good, but, then, I scroll the Web page (up or down) and then I put the cursor over the link again and the text box opens far from the cursor. This only happens when I use Chrome.

Could you please tell me how to fix this?

Thanks in advance,
Juan Gabriel Aldana Jaramillo at 07:20AM, 2011/10/12.
Tomasz Grzegorczuk

change line with safari to:

if ( browser.indexOf('safari') >=0 && browser.indexOf('chrome') == -1 )st=0;

Tomasz Grzegorczuk at 12:14AM, 2013/02/27.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2015