jquery - Tooltip and RaphaelJS -

i create tooltip on rectangle , tooltip remains same when i'm on text, in background. use library , jquery raphaeljs (tooltip).

var paper = new raphael(document.getelementbyid("canvas_schema"),550,300);       var rectangle2 = paper.rect(130, 75, 140,40,15);     var texte = paper.text(200, 90, "tarification et souscription\nweb");      rectangle2.attr({fill:"0.0-white:5-yellow:100"});     rectangle2.animate({"stroke-width":0});       texte.mouseover(function(){         rectangle2.animate({         fill:"0.0-white:5-red:100",         "stroke-width":0,         title:"hello"});});      texte.mouseout(function(){         rectangle2.animate({         fill:"0.0-white:5-yellow:100"});});      rectangle2.mouseover(function(){         this.animate({         fill:"0.0-white:5-red:100"});});      rectangle2.mouseout(function(){         this.animate({         fill:"0.0-white:5-yellow:100"});});      $(rectangle2.node).qtip({                  content: { text: 'antenia<br>solution progicielle' },                 style:'mystyle',                 position: {                     corner: {                         target: 'topright',                         tooltip: 'bottomleft'                     }                 }     }); 

http://jsfiddle.net/ua3pg/ don't know how use raphaeljs , jquery on jsfiddle.

thanks

i implemented method without using jquery. can call "tooltip drawing" function element.hover() event

function draw_tooltip(object, show, text, x, y) { if(show == 0) {     popup.remove();     popup_txt.remove();     transparent_txt.remove();     return; } //draw text somewhere dimensions , make transparent transparent_txt = rph.text(100,100, text).attr({fill: "transparent"});  //get text dimensions obtain tooltip dimensions var txt_box = transparent_txt.getbbox();  //draw text popup_txt = rph.text(x+txt_box.width, y-txt_box.height-5, text).attr({fill: "black",font: "20px sans-serif"});  var bb = popup_txt.getbbox();  //draw path tooltip box popup = rph.path(                  // 'm'ove 'dent' in bubble                 "m" + (x) + " " + (y) +                 // 'v'ertically draw line 5 pixels more height of text                 "v" + -(bb.height+5) +                  // 'h'orizontally draw line 10 more text's width                 "h" + (bb.width+10) +                 // 'v'ertically draw line bottom of text                 "v" + bb.height +                  // 'h'orizontally draw line we're 5 pixels fro thge left side                 "h" + -(bb.width+5) +                 // 'z' closes figure                 "z").attr( {fill: "yellow"} );  //finally put text in front popup_txt.tofront();  }  var rph = raphael(10, 50, 600, 300); var x = 40, y = 40; var tooltip_x = 60, tooltip_y = 60; var display_text = "hello"; rph.rect(x,y,60,40).attr({fill: "red"})                .data({"x":x,"y":y})                .hover(function () {                     draw_tooltip(this, 1, display_text, tooltip_x, tooltip_y);                 },                 function() {                     draw_tooltip(this,0);                 }); 

here working example jsfiddle

i dont quite understand mean "the tooltip remains same when i'm on text, in background" in code above can change text, tooltip coordinates, text color , tooltip background color.

note : element.hover() work anywhere on rectangle if it's filled color. otherwise able see tooltip when hover on rectangle edges.