工具提示和RaphaelJS

Question

我想在矩形上創建一個工具提示，當我在文本中時，工具提示仍然保持不變，就像在背景中一樣。 我使用庫和jQuery的RaphaelJS（工具提示）。

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/ 我不知道如何使用raphaelJS和jQuery上的jsfiddle。

謝謝

Answer 1

我實現了一個不使用JQuery的方法。您可以從element.hover()事件

function draw_tooltip(object, show, text, x, y) { 
if(show == 0) { 
    popup.remove(); 
    popup_txt.remove(); 
    transparent_txt.remove(); 
    return; 
} 
//draw text somewhere to get its dimensions and make it transparent 
transparent_txt = rph.text(100,100, text).attr({fill: "transparent"}); 

//get text dimensions to 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 for tooltip box 
popup = rph.path( 
       // 'M'ove to the 'dent' in the bubble 
       "M" + (x) + " " + (y) + 
       // 'v'ertically draw a line 5 pixels more than the height of the text 
       "v" + -(bb.height+5) + 
       // 'h'orizontally draw a line 10 more than the text's width 
       "h" + (bb.width+10) + 
       // 'v'ertically draw a line to the bottom of the text 
       "v" + bb.height + 
       // 'h'orizontally draw a line so we're 5 pixels fro thge left side 
       "h" + -(bb.width+5) + 
       // 'Z' closes the figure 
       "Z").attr({fill: "yellow"}); 

//finally put the 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); 
       }); 

這裏所說的「工具提示圖」功能是一個工作示例jsfiddle

我不太明白你的意思是「工具提示仍然是相同的，當我在文，如在背景中「，但在上面的代碼中，您可以更改文本，工具提示座標，文本顏色和工具提示背景顏色。

注：的element.hover（）將上只有當它的充滿一些顏色矩形任何地方工作。否則，只有當您將鼠標懸停在矩形邊上時，才能看到工具提示。