javascript - Viewing text on mouse over in Raphael.js -

i have rapahel circles , need view text on them when hover on them. here code:

var text = r.text(x, y, "some text"); r.circle(x, y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"})         .mouseover(function () {                 this.animate({"fill-opacity": 1, 'transform':"s2 2"}, 500);}             txt.show();         })         .mouseout(function () {             this.animate({"fill-opacity": 0.8, 'transform':"s0.5 0.5"}, 500);}             txt.hide();         }); 

x , y calculated in loop makes several circles on screen. problem text show last 1 , position fixed. how can code work , bind single text each circle?

try this

var circle = r.circle(x, y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"});  circle.txt = r.text(circle.attr('x'), circle.attr('y'), "some text");  circle.mouseover(function () {                   this.animate({"fill-opacity": 1, 'transform':"s2 2"}, 500);}               this.txt.show();           })           .mouseout(function () {               this.animate({"fill-opacity": 0.8, 'transform':"s0.5 0.5"}, 500);}               this.txt.hide();           });