Raphael JS to make a map with tooltips on hover

Question

I am trying to make a map with Raphael JS, pretty much like the example they have on their site: http://raphaeljs.com/australia.html

However, I want to show the info on hover as a tooltip that fades in/out as you move to different parts of the map (not next to the map like on their example). What is the best way to do that?

This is what I came up with so far, but in IE (e.g. IE6 and IE7) the tooltip doesn't disappear and I'm not sure why: http://jsfiddle.net/keith/sXCk6/

Same as [How to do a tooltip on an SVG generated by Raphael](http://stackoverflow.com/questions/3417479/how-to-do-a-tooltip-on-an-svg-generated-by-raphael) — a paid nerd, Feb 01 '11 at 23:13
So I started working on a version, and came up with this: http://jsfiddle.net/keith/sXCk6/ Can someone tell me if that is the right way to go about this? Also, in IE, the tooltip doesn't disappear and I don't know why — Keith, Feb 02 '11 at 00:31

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

This posting here on Stack Overflow addresses the issue of IE and mouseover problems: Move active element loses mouseout event in internet explorer

edited May 23 '17 at 10:33

Community

1
1

answered Feb 02 '11 at 22:03

Keith

673
3
13
27

Raphael JS to make a map with tooltips on hover

1 Answers1