How to do a tooltip on an SVG generated by Raphael

Question

I'm doing a bit of a pedagogical exercise, converting XML to SVG with XSLT, Javascript and Raphael. I'm sure it's the hard way...but it's educational.

The problem I've run into is creating tooltips. So far, I've found three ways to do this:

1. The first way is to use .attr({title: "blah"{) on an object. This works, but it's not supported by Raphael officially, and the content I want to put in the tooltip might be somewhat long, which is a problem when people's OS times out the tooltip before people have finished reading it.
2. The second way I've found is the function here. It works OK for having a Raphael object popup when there is a mouseover, but, near as I can tell, getting a normal-looking tooltip to pop up isn't possible.
3. Using the jquery Tooltip plugin. This just doesn't seem to work. I can't get Raphael to add the title attribute to an object AND get this to select that title. Not sure why.

So, what I'd like to know is, what's an easy and reliable way to add tooltips to Raphael objects such that they popup when people mouseover the object, and disappear when they mouseout (but not before)?

Answer 1

One way to do this is to use a div tag on top of the Raphael paper. Then use Jquery mousevents along with fadeIn() and fadeOut(). I created an example on jsFiddle. Have a look

Answer 2

If you use [title] attributes, it will wrap the elements with links making it easy to use tooltip plugins like qtip.

var R = Raphael('canvas', 100, 100); R.path(path).attr({ title: 'Fancy tooltip' });  $('#canvas a').qtip();