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

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() は、何らかの色で塗りつぶされている場合にのみ、長方形のどこでも機能します。そうしないと、長方形の端にカーソルを置いたときにのみツールチップが表示されます。

于 2013-05-07T21:38:43.383 に答える