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ë</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