Tooltip to show above or below hotspot depending on scroll position

Question

Hi,

I have done some simple javascript to show and hide some div when you mouse over hot spot on a image map.

<script>
function showDiv(name) {
document.getElementById(name).style.display = "block";
}
function hideDiv(name) {
document.getElementById(name).style.display = "none";
}
</script>

The functions are appropriately called on the mouseover and mouseout events.

At the moment the positioning is applied in the css. However I would like to extend this to show the tooltip above or below the hotspot depending on the scroll position. I mean at the moment if you mouse over a hotspot which is at the bottom of the screen, the div that appears will appear out of view, the visitor will have to scroll down to see it. I would like it to appear above the hotspot in such cases.

Any suggestions, thanks.

Answer 1

I once put something together using Prototype (getDimensions() / viewport.getScrollOffsets() are lifesavers!), but can't find the code any more. I just remember that figuring out what offset to use with what positioning looks easy, but takes a lot of time until it actually works.

You may want to build on an existing solution (or take a peek into one to see how they do positioning) . Nick Stakenburg's Prototip (warning not entirely free, check the license page) is very good and flexible, but there are dozens of scripts out there for all frameworks.

For framework-independent solutions check DynamicDrive, they work even though the code sometimes makes your toenails curl.

Answer 2

Refer this link. This satisfies your requirements.

http://www.walterzorn.com/tooltip/tooltip%5Fe.htm

http://www.dyn-web.com/code/tooltips/