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 proble

Answer 1

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();

Answer 2

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 3

In case someone will seek for an example of tooltip over g Rapahel charts (I guess it could be easily used with plain Rapahel too) I did one that use dynamically created div (so no third part tooltip plugin needed) that acts as a tooltop over pie chart

Interactive Pie Chart with Tooltip

It uses mousemove and mouseout of raphael...

b.t.w I use the legend as a source of the tooltip - of course its not a must an could be replaced by any other text (just replace the this.label[1].attrs.text with some other text)

Answer 4

I used qtip to add tooltips:

http://jsfiddle.net/chrisloughnane/h5WU9/