Raphael.js Qtip tooltip disappears when trying to set id

Question

I'm using Raphael and qTip together to show a tooltip when hovering over the circle I draw with raphael.

It works, until I try to give the Raphael element an id, then the tooltip just doesn't show up.

Works:

var c = self.paper.circle(x, y, radius)
.attr({'fill':'#f2f2f2'});
$(c.node).qtip({content:{text:circleName}});

Does not work:

var c = self.paper.circle(x, y, radius)
.attr({'fill':'#f2f2f2'})
.id = circleName; //<---
$(c.node).qtip({content:{text:circleName}});

ideas?

Answer 1

If I simplify the way you give the id, it becomes this:

var c = a.id = circleName;

Because of the second =, c is not a circle element, and the tooltip cannot be shown, it does not know where.

If you set the id after creating the circle...

var c = self.paper.circle(x, y, radius)
.attr({'fill':'#f2f2f2'});

c.id = circleName;

$(c.node).qtip({content:{text:circleName}});

... the problem disappears.

I created a JS Bin to show you (not exactly the same code but it should be enough).