raphael newbie: popup background is jumping

Question

I tried the following code -

  var fin = function () {
   // this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
   this.flag = r.popup(this.bar.x, 280, this.bar.y || "0").insertBefore(this);
   };

  var fout = function () {
   this.flag.animate({opacity: 0}, 200, function () {this.remove();});
   };

. . .
r.barchart(10, 10, 900, 300, [[55, 20, 13, 32]], 0, {type: "sharp"}).hover(fin, fout);

It works well in raphael sample page - http://g.raphaeljs.com/barchart2.html

but in my page the tooltip blackbackground is "jumping" up each mouse over. [the tooltip text stays at the correct x,y]

Do I use the wrong libraries? How do I fix it?

Answer 1

That's puzzling. I don't know exactly why that's happening, but there's a better solution: Create the popup once for each bar and then show or hide it on hoverin/hoverout.

var r = Raphael(0, 0, 800, 500);

fin = function () {
    if (!this.hasOwnProperty("flag")) {
        this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
    }
    this.flag.attr("opacity", 1);
},
fout = function () {
    this.flag.animate({opacity: 0}, 300);
};

var bars = r.barchart(10, 10, 900, 300, [[55, 20, 13, 32]], 0, {type: "sharp"}).hover(fin, fout);

jsFiddle