툴팁 및 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/ 내가 jsfiddle에 raphaelJS 및 jQuery를 사용하는 방법을 모르겠어요.

감사합니다.

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는()가 어떤 색으로를 작성의 경우에만 사각형의 아무 곳이나 작동합니다. 그렇지 않으면 직사각형 모서리에 마우스를 가져갈 때만 툴팁을 볼 수 있습니다.