Tooltip и 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() будет работать в любом месте на прямоугольнике, только если это заполнены с некоторым цветом. В противном случае вы сможете увидеть всплывающую подсказку только при наведении курсора на края прямоугольника.