View RSS Feed


Sticky Tooltip script Unofficial Update

Rate this Entry
The Sticky Tooltip script has some room for updating as I've outlined here:

Sticky Tooltip script - not sticky

and here:

Sticky Tooltip script - no dock in IE 7- for image map

In those threads I offer piecemeal solutions, the first of which above is the most problematic:

Quote Originally Posted by jscheuer1 View Post
Even on the demo page, if the tip is in sticky mode and one mouses over one of the other triggers, the tip changes position and content. Also in sticky mode, if one mouses out of the trigger and back over it, the content remains the same but the position changes.
There is also another issue:

Since when sticky, clicking outside the box is what dismisses it, and the mouse is probably still over the trigger or may now be over another anchor link or area tag, if that tag links to another page, it will fire, taking the user away from the page when all they wanted to do was dismiss the sticky tip.

This last and the first might actually be desirable in some cases, usually not.

Since all three are worth updating, I've made a combined script that addresses all three and includes two new options to allow the first and second to be toggles:

* Sticky Tooltip script (v1.0)
* Created: Nov 25th, 2009. This notice must stay intact for usage 
* Author: Dynamic Drive at
* Visit for full source code

* Unofficial Modifications 11/2010:
* Allows for optional disabling of links on the page while sticky is in sticky mode
* Allows for optional extremesticky behavior to override the original codes 'bug' in stickiness
* Fixes sticky on right click for image maps in IE 6 and 7

var stickytooltip={
	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
	fadeinspeed: 200, //duration of fade effect in milliseconds
	rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
	stickybordercolors: ['black', 'darkred'], //border color of tooltip depending on sticky state
	stickynotice1: ['Press "s"', 'or right click', 'to sticky box'], //customize tooltip status message
	stickynotice2: 'Click outside this box to hide it', //customize tooltip status message
	stickykillclicks: true, //while tooltip is sticky, should links on the page be temporarily disabled?
	extremestick: true, //while tooltip is sticky, should all other triggers be temporarily disabled?

The stickykillclicks option apparently does not disable links in the sticky tip, which is a good thing. I just haven't figured out why yet.

The extremestick option prevents all the triggers from taking over and moving and/or changing the sticky tip when in sticky mode.

The IE 6 and 7 issue for image maps is dealt with and obviously needs no toggle.

Anyways, here's the code (right click and 'save as'):


It's a drop in replacement for the original script, everything else remains the same as instructed on the demo page.

Edit: 12/10 - Added another update: script will now properly follow border color changes using the stickybordercolors configuration. The original only changed the background of the bottom panel.

Submit "Sticky Tooltip script Unofficial Update" to Submit "Sticky Tooltip script Unofficial Update" to StumbleUpon Submit "Sticky Tooltip script Unofficial Update" to Google Submit "Sticky Tooltip script Unofficial Update" to Digg

Updated 12-16-2010 at 05:17 PM by jscheuer1 (add another update)

Tags: None Add / Edit Tags
DD Scripts Mods , JavaScript & Ajax