Tooltip layer positioning issue

Hi all,

I’m using a great jquery script called Coda Bubbles to display tooltips on a clients website. I’ve used this script before, and it uses JS and CSS to position a div with extra information over an image. Never had any trouble using this until now.

Because I only have one image this time with several links attached to it using a html image map, the script is acting funny. In stead of a hovering div above the href-area, Firefox shows the info somewhere in the lower left part of the image and Internet Explorer shows it somewhere in the lower right corner, cutting of a great part of the div.

How can I make sure the pop up div is shown right above the mouse cursor, or at least in the lower left corner like in FF?

This is the JS:


<script language="JavaScript" type="text/javascript">
// tooltips
$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 0;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -100,
          left: -2,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});
</script>

This is the HTML:


<div id="contactmap">
<img src="http://fileserv.twizted.be/reynders/gui/contactmap.gif" width="800" height="455" border="0" usemap="#contactmap" />
<map name="contactmap" id="contactmap">

<div class="bubbleInfo"><area shape="poly" coords="115,243,122,241,125,247,124,252,111,244" href="contact/belgium" alt="Belgie" class="trigger" />
<div class="popup"><strong>Belgi&euml;</strong><br />Reynders Label Printing<br />Reynders Pharmaceutical<br />Reynders Security & Specialty</div>
</div>

<div class="bubbleInfo"><area shape="poly" coords="87,259,95,263,100,272,99,279,98,284,106,288,115,289,119,284,125,285,130,281,128,269,123,268,132,256,125,252,110,245,103,254,97,251,96,256,87,258" href="contact/france" alt="France" class="trigger" />
<div class="popup"><strong>France</strong><br />Reynders Etiquettes<br />Reynders Cosmetiques<br /></div>
</div>

<div class="bubbleInfo"><area shape="poly" coords="154,227,157,243,164,248,169,252,183,255,189,245,186,236,187,225,170,224,169,220,154,227" href="contact/poland" alt="Polska" class="trigger" />
<div class="popup"><strong>Polska</strong><br />Reynders Label Printing</div>
</div>
  
<div class="bubbleInfo"><area shape="poly" coords="367,322,367,330,373,333,370,339,358,353,354,351,351,355,356,365,347,369,354,380,362,374,362,392,379,426,388,416,391,398,412,382,415,376,422,376,416,357,389,347,392,341,383,334,390,321,384,318,376,324,367,322" href="contact/india" alt="India" class="trigger" />
<div class="popup"><strong>India</strong><br />Reynders Label Printing</div>
</div>

</map>
</div>

This is the CSS:


/* contact */
div#contactmap{
overflow: hidden;
width: 900px;
margin: 0 auto;
}

/* tooltips */
.bubbleInfo {
position: relative;
display: inline;
padding-left: 1px;
padding-right: 1px;
padding-top: 2px;
}

.popup {
position: absolute;
display: none;
width: 175px;
background-color: #ffffff;
border: 1px solid #CCCCCC;
padding: 8px;
font-size: 10px;
}

Any help to fix this would be greatly appreciated.

Greets,
Stef

Could this have anything to do with the image map? Or does the answer lie in this piece of JS which alters the position of the pop up div (but not the same in each browser):


[COLOR=#FF5555][I]// reset position of popup box[/I][/COLOR]
        popup.[COLOR=#006600]css[/COLOR][COLOR=#66CC66]([/COLOR][COLOR=#66CC66]{[/COLOR]
          top: [COLOR=#CC0000]-100[/COLOR],
          left: [COLOR=#CC0000]-2[/COLOR],
          display: [COLOR=#3366CC]'block'[/COLOR] [COLOR=#FF5555][I]// brings the popup back in to view[/I][/COLOR]
        [COLOR=#66CC66]}[/COLOR][COLOR=#66CC66])[/COLOR]