View Full Version : Rich HTML Balloon Tooltip

11-14-2006, 05:31 PM
hey folks.

I am using the "Rich HTML Balloon Tooltip" (at http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm). I have actually made a small conversion, so that this works on Image maps., and the tooltip shows up when you mouse over the map <area>. All i changed was the reference of "rel" to "alt" and "a" to "area" in the script, and it seems to work fine. here's my page:

2 questions:
1) I guess my changes have made it not work at all on FF2. any ideas why?
2) and more importantly - is there a way to change the left offset? as you can see - the whole balloon appears too far to the left.

Many thanks!

11-23-2006, 07:26 AM
bump :(

11-23-2006, 08:42 AM
Unfortunately there's no easy way to get the tooltip script (or any others currently on DD) to work with imagemaps. It might appear simple, but the positioning is very different when it comes to an image map.

You can do a search on the forums for "imagemap tooltip" to see some of the previous discussions on this. I do remember modifying one of the tooltip scripts to work with imagemaps, but it was specifically for a particular imagemap, and may not be applicable generally.

07-28-2007, 10:25 AM
1. Why not use the rel attribute instead of alt? This might fix it. Also check the rel attribute is in the <area> tag.

2. Just add style="margin-top:-200px" to the div containing the tooltip content. Obviously change the margins and their values but this should work fine. The arrow is another matter but then you don't have to have that anyway.

Hope that works

07-28-2007, 11:57 AM
To get any positioning sort of script to work with any image map, the script must be modified to get and understand the meaning of the area tag's coords attribute in relation to the position of the map itself. I've worked this out for one script, I think it was anylink drop down menu. But that was only with rectangular area tags and a specific page. As ddadmin says, it is more complicated than one might think.

The task would be made a little simpler if all maps that this were tried with were coded in a valid manner and were on pages that were otherwise also valid HTML.

However, if one were willing to settle for content that were tied to the position of the mouse, that would ease things considerably. This would result in a tip that appeared in a slightly different position each time and probably one that moved (followed the mouse) while the mouse was over the target.

07-28-2007, 04:11 PM
I have no clue about any of this, however, I have a different idea for a different approach.

Using CSS you could place your map inside a div, without any dots. Inside of that div you could place your dot images inside of their own divs... <div id="city1"> Each of these dots could then be active hover links, that have their own pop up tool box using CSS to position them.

So from here, you just use absolute positioning, and make sure the dots have a higher Z index than the map. In essense creating image layers, with the dots floating over the top. A mouseover will display the tooltip, and it should be in the perfect place everytime. The only pain would be positioning them correctly with CSS... may take a little time to get them exactly where you want. You may want to leave the dots on the map image if you can make them a touch smaller. Would make it easier to know when your new dot is in the right spot, as the old dot wouldn't be visible anymore.

Would this work?

(Hope you don't have to do an additional 200 cities... you'd need lots of hot pockets and red bull for that :) )

07-28-2007, 08:42 PM
This tip script might work out better for an image map, as it is based (or at least can optionally be based) upon mouse position: