Javascript Tooltip / Posts /

Using the javascript tooltip on an area element in an image map

44
Hello,

I'm trying to use the javascript tooltip on an area element in an image map. After applying the tooltip class to each area in the map, it worked perfectly in FF, Chrome and Opera.

IE8/9 and Safari have other ideas.

Do these browsers recognise an area as an element? If they do, do they have problems with circular areas?
The absolute position of the tooltip wrapper div is causing the tip to be positioned in the top left of the screen.

I've tried wrapping the whole thing in a relatively positioned div, applied offset values, absolute values to the data divs but to no effect. the tips continue to appear in top left corner of screen. The element style is top: auto and left: auto which must be interpreted as x=0, y=0.

Any ideas how to go about fixing this please? I would really like to use this tooltip becuase it looks great, when it works, but my client won't be happy unless it works in all major browsers.

I hope you can provide a solution.

Thank you and regards.

Rob
Rob  12 years ago   viewed: 36620    

9 Answers

-6
The root cause of your issue is that the this keyword within your tooltip.pop(this, ...) is referring to the whole <map name="Map" id="Map"> other than the dot element, and the tooltip gets lost in finding the size and position of the map element.

I think you can fix this issue by setting the script's option as:
var tooltipOptions=
{
    .......
    relativeTo: "mouse",
Milo   12 years ago
-1
It worked. Thank you very much for a quick response
Rob   12 years ago
-1
OK, I have the same problem, but I can't figure out how to get the tooltip working on an image map. I don't have much experience. Could someone post some sample code on how to do this?

Thanks!
Lannie   11 years ago
0
Did you try:
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" onmouseover="tooltip.pop(this, 'hi there')">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
</map>

Please post back if it works.
Vica   11 years ago
-4
That worked just fine. Thanks!
Lannie   11 years ago
0
It is not 100% all right as the popup position will not be correct. The map and area element has no layout position so the tooltip.pop(this, 'hi there') will popup the tooltip from {0, 0} of the screen (or {0, 0} of the image with old IE). To avoid this issue, you can:
  • 1. Update the pop command as: tooltip.pop(this, 'hi there', {position: 4}) to force the popup to be positioned in the center of the screen;
  • or 2. Set the relativeTo option as "mouse" as I previously recommended:
    var tooltipOptions=
    {
        .......
        relativeTo: "mouse",
    ...
Milo   11 years ago
0
I had read about that, and used the relativeTo value of "mouse" in the call to tooltip.pop() so it works just fine. Thanks for the reminder!

The call I used looks like this: onmouseover="tooltip.pop(this, '#image1', { relativeTo:'mouse' })"

I did not want to change the default setting because I only need to use the image map functionality in a few places, and the default behavior is great everywhere else. We are very pleased with the tool.
Lannie   11 years ago
0

I read this post, and if possible, I'd like to give some fascinating topics or suggestions to you. Perhaps you could refer to this topic in your next article. I'd like to learn more about it! Thanks! quordle

miklas
  15 days ago
-4
Hi Rob,

Any luck with this?

I am bug fixing a site at the minute that is experiencing a very similar issue.

I am ok in FF but Chrome and IE is doing the weird positioning thing.

My initial thoughts was around CSS positioning also but cant seem to fix.

Any luck?

My site is here, the map on the right, hover over the dots

http://dev.kisdevelopment.co.uk/clearwater/

Cheers

Ryan
Ryan
  12 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲