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的情况下实现了一个方法。您可以调用＆＃34;工具提示绘图＆＃34;来自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

我不明白你的意思＆＃34;当我在文本上时，工具提示保持不变，就像在后台＆＃34;但在上面的代码中，您可以更改文本，工具提示坐标，文本颜色和工具提示背景颜色。

注意：只有当填充某种颜色时，element.hover（）才能在矩形的任何位置使用。否则，只有当您将鼠标悬停在矩形边上时，才能看到工具提示。

工具提示和RaphaelJS

1 个答案: