25

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)?

mlissner
  • 17,359
  • 18
  • 106
  • 169

4 Answers4

12

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

Zevan
  • 10,097
  • 3
  • 31
  • 48
  • This looks good. Curious, is there anything fundamentally different in this approach compared to most tooltip plugins? I'll try it out and get back. I had problems with clientX and clientY not working in all browsers. – tfwright Dec 01 '10 at 00:50
  • Yeah, I got this to work somewhat, but my SVG is centered in a div overlay and the tooltip pops up about 400px to the right of where it should. – tfwright Dec 01 '10 at 01:35
  • if you use the offsetX and offsetY properties rather than clientX and clientY properties it will fix your problem. – Zevan Dec 01 '10 at 05:42
  • That works in Safari and Chrome, but in Firefox the tooltip appears in the top left hand corner of the containing div. Is there a cross-browser solution? – tfwright Dec 01 '10 at 22:35
  • 1
    e.pageX and e.pageY are the way to go. I think Jquery makes these cross browser. – Zevan Dec 02 '10 at 02:11
  • A bit of library tweaking, but I've also confirmed that this works. Good job! – Blender Dec 06 '10 at 15:34
7

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();
neojp
  • 457
  • 5
  • 10
  • Bootstrap3 also has a tooltip plugin and that works perfectly with your method. Thank you for the hint. – koppor Sep 09 '13 at 21:37
  • I couldnt make it work, any idea how to? it deisplay the tooltip text at the bottom of the page, but no js errors.. – jpganz18 Oct 03 '14 at 21:34
  • @jpganz18 That would mean that your tooltip code works, it's just displaying it in the wrong place. Probably because of wrong styles in your CSS or the tooltip plugin you used doesn't recognize the coordinates. Also, Raphael might have changed how things work after the 3 years since I posted this. – neojp Nov 21 '14 at 18:06
2

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)

Community
  • 1
  • 1
Daniel
  • 36,833
  • 10
  • 119
  • 200
  • Daniel: Can we retrieve attributes like stroke, radius from raphael pie chart object....please see this question: http://stackoverflow.com/questions/15846655/retrieve-attributes-of-raphael-pie-chart I am stuck...Thanks in advance for your help – Chirag Tayal Apr 06 '13 at 04:30
1

I used qtip to add tooltips:

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

chris loughnane
  • 2,648
  • 4
  • 33
  • 54
  • Are you using IE10? My example works in chrome and on my S4. My jsfiddle is quite an old example. Check http://qtip2.com/demos for demos that do work. – chris loughnane Oct 22 '13 at 10:24