Download tooltip with shadow

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

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

Comments

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

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 03:20PM, 2011/10/12.
Tomasz Grzegorczuk
JUAN GABRIEL

change line with safari to:

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

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

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com