jQuery tools tooltip works on imagemap area in FF only

Some history: Although I know that it is considered ‘old’ technology, I have built hundreds of imagemaps over 10 years for a local photographer who uses a panoramic camera (now a spectacular digital one) to photograph weddings, schools etc. I then pop an imagemap area over each face and add a title (and alt text for IE viewers) that shows up on mouseover to identify the person.

I’ve been using the jQuery tools library recently and tried changing [URL=“http://flowplayer.org/tools/demos/tooltip/index.html”]this tooltip demo which turns an image’s title into a tooltip from:

$(document).ready(function() {
$(“#demo img[title]”).tooltip(‘#demotip’);


$(document).ready(function() {
$(“#demo area[title]”).tooltip(‘#demotip’);

Thus grabbing the title associated with an area rather than an image.

I just built a quick proof of concept using the image map of a family meeting on one of my sites, and viewed it in Firefox. As expected, on hovering over an area the tooltip popped up at top center of the image, with the title text in it. Wow! GREAT! I thought. :wink:


In IE: Tooltip pops up, containing the matching title text, but far away from the clicked area and NOT at top center.

In Opera: No tooltip, browser’s title box opens by mouse position, but with out title text, instead it contains the a href link that clicking in the area would go to.

In Chrome: No tooltip, no title.

In Safari: No tooltip, no title.

(BTW All tests were done in current browser versions under Win XP)

I just tried Tero’s demo at http://flowplayer.org/tools/demos/tooltip/index.html in all browsers and it worked fine, in every case the tooltip appeared top center of the image, with the title text in it! So it would seem at first thought to be involved with the way browser manufacturers have built their DOM… But further reading indicates that all post v5 browsers use the same DOM model, so I’m stumped. I’ve Googled quite a few threads where folk have had js/DOM/imagemaps conflicts, but have found no post resolving the issue.

Since libraries such as jQuery claim to isolate us from browser variances, is it just that imagemaps are considered so ‘out of date’ that browser manufacturers haven’t bothered to update their code to integrate them into the standard DOM? (Bravo FF, ‘does it right’ again!):smiley:

I stumbled upon this thread from google looking for a reason why my jquery tools tooltip is not working (still have not found the answer).

But I do know why this is not working in this case. The jQuery Tools tooltips were designed that triggers needed to be block elements, but area elements are inline. I’m not sure how area elements would react if you set the display as block… but im pretty sure why this is not working…

sorry for the thread resurrection, but it seemed warranted as this is one of the top google results I kept finding.

After playing with this for several days, and with no success, I am resigned to it being a browser/DOM issue. So, since I only use and recommend Firefox I have simply wrapped the jQuery tools code in a jQuery browser detection function so that if the browser is based on mozilla the tooltip replacement takes place and users of firefox see the greatly improved tooltip, and others just get their browser’s tooltip as per normal.

Works a treat! :wink:

And yes, I know that the JQuery function is depreciated but at present it is still in the code download.http://api.jquery.com/jQuery.browser/

//Only replace title text if mozilla based browser 
if ($.browser.mozilla) { 
        $(document).ready(function() { 
        $("#demo area[title]").tooltip('#demotip'); 

Keep in mind jquery plugins aren’t generally anywhere near the same quality as the library itself. It’s very possible there’s a flaw in the plugin. It’s even more likely that you just have some implementation issue.

Debugging is the answer. You will probably need to dig into the plugin code and understand it, and test it, to get an idea why it’s not working with your setup.



I’ve Googled this quite extensively and find many references to area in imagemap problems, in most cases the poster has concluded that since image maps are old technology (although as far as I can see they aren’t depreciated yet) browser manufacturers have ignored them over the years when integrating the DOM into their browser model.

I reluctantly feel that if it works exactly as the DOM / ECMASCRIPT model implies in Firefox that any cases of non working in other browsers implies browser failures. Perhaps I put too much faith in Firefox, but…