How to do a tooltip on an SVG generated by Raphael How to do a tooltip on an SVG generated by Raphael jquery jquery

How to do a tooltip on an SVG generated by Raphael


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


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


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)