View Full Version : Sticky Tooltip script

11-07-2010, 07:16 PM
I used the "Sticky Tooltip script" ( http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm )
with <area> tag inside an image-map.

It works good with Chrome and Firefox. It works too with IE 7 except the right click. Sticky box doesn't work when I click right.
What can I do. I need help. Thank you.


Here is the html code :

<div><img src="docs/essai3.jpg" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="41,87,74,131" href="http://www.wmaker.net/starcityisland/index.php?action=article&id_article=413992" data-tooltip="sticky1">

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.


<div class="stickystatus"></div>

11-08-2010, 05:36 AM
Use this updated version:


Notes: In IE 6 and 7 the right click, (on)contextmenu as used by the script, doesn't register on the trigger in an image map, rather upon the image. To remedy this I changed the code to instead of testing if the right click is enabled and if the (highlighted) element right clicked upon is registered as a trigger (original code, excerpted from the init function):

$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false

Instead of that perhaps more convoluted than it needs to be test, the new code registers a runtime variable in the scope of the init function to track whether or not a tip is open. This is a different test, but amounts to the same result (new code, additions highlighted):

init:function(targetselector, tipid){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(document.body)
var curtip = null;
if ($targets.length==0)
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
curtip = this;
stickytooltip.showbox($, $tooltip, e);
$targets.bind('mouseleave', function(e){
curtip = null;
stickytooltip.hidebox($, $tooltip)
$targets.bind('mousem . . .

And use its "thruthiness" later here in the same section of the init function as quoted above as from the original (new code):

$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && curtip){
stickytooltip.docktooltip($, $tooltip, e)
return false

Further Notes: Although not used, Its value when true is set to the trigger so that it could conceivably be used elsewhere in the init function and/or passed to other functions. This is much like (in the orignal and new code) the event (e) being passed along to the docktooltip function. It's not required or used there, yet.

11-08-2010, 12:32 PM
Very good. It works. Thank you very much.