web-dev-qa-db-ja.com

Raphaelによって生成されたSVGでツールチップを実行する方法

XSLT、Javascript、Raphaelを使用してXMLをSVGに変換するという、少し教育的な演習を行っています。それは難しい方法だと確信しています...しかしそれは教育的です。

私が遭遇した問題は、ツールチップの作成です。これまでのところ、これを行う3つの方法を見つけました。

  1. 最初の方法は、オブジェクトで.attr({title: "blah"{)を使用することです。これは機能しますが、Raphaelによって正式にサポートされておらず、ツールチップに入れたいコンテンツが多少長くなる可能性があります。これは、ユーザーのOSがツールチップを読み終える前にタイムアウトする場合に問題になります。
  2. 私が見つけた2番目の方法は、関数 here です。マウスオーバーがあるときにRaphaelオブジェクトがポップアップするのは問題ありませんが、私が知る限り、通常のツールチップをポップアップさせることはできません。
  3. jquery Tooltipプラグイン を使用します。これはうまくいかないようです。 Raphaelにtitle属性をオブジェクトに追加させ、これを取得してそのタイトルを選択させることができません。理由はわかりません。

だから、私が知りたいのは、ツールチップをRaphaelオブジェクトに追加して、ユーザーがオブジェクトの上にマウスを置くとポップアップし、マウスアウトすると消える（前ではない）ようにする簡単で信頼できる方法は何ですか？

jquerysvgtooltipraphael
25
mlissner

これを行う1つの方法は、Raphael用紙の上にdivタグを使用することです。次に、fadeIn（）およびfadeOut（）とともにJqueryマウスベントを使用します。 jsFiddleで例を作成しました。 ご覧ください

12
Zevan

[title]属性を使用すると、要素がリンクでラップされ、 qtip などのツールチッププラグインを簡単に使用できるようになります。

var R = Raphael('canvas', 100, 100);
R.path(path).attr({ title: 'Fancy tooltip' });

$('#canvas a').qtip();
7
neojp

誰かがgRapahelチャートのツールチップの例を探す場合に備えて（プレーンなRapahelでも簡単に使用できると思います）動的に作成されたdiv（を使用するため、サードパートのツールチップはありません）円グラフのツールチップとして機能するプラグインが必要です）

ツールチップ付きのインタラクティブな円グラフ

それはラファエルのmousemoveとmouseoutを使用しています...

b.t.wツールチップのソースとして凡例を使用します-もちろん、他のテキストに置き換える必要はありません（this.label[1].attrs.textを他のテキストに置き換えるだけです）

2
Daniel

Qtipを使用してツールチップを追加しました。

http://jsfiddle.net/chrisloughnane/h5WU9/

1
chris loughnane