Viewing text on mouse over in Raphael.js

Question

I have some Rapahel circles and I need to view some text over them when I hover on them. Here is my 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 and Y are calculated in a loop which makes several circles on the screen. The problem is that the text show is always the last one and the position is also fixed. How can I get this code to work and bind a single text to each circle?

score 3 · Answer 1 · answered May 03 '13 at 08:43

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

Viewing text on mouse over in Raphael.js

1 Answers1