0

我想在矩形上创建一个工具提示，当我在文本上时，工具提示保持不变，就像在背景中一样。我使用库和 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。

谢谢

4

1 回答 1

1

I implemented a method without using JQuery. You can call a "tooltip drawing" function from 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 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);
                });

Here is an working example jsfiddle

I dont quite understand what you mean by "the tooltip remains the same when I'm on the text, as in the background" but in the code above you can change the text, tooltip coordinates, text color and tooltip background color.

NOTE : The element.hover() would work anywhere on the rectangle only if it's filled with some color. Otherwise you will be able to see tooltip only when you hover on the rectangle edges.

于 2013-05-07T21:38:43.383 回答