4

これは非常に具体的でやや複雑な問題であるため、この記事の残りを読む前に確認する必要がある最小限のテスト ケースを用意しました。

Raphaëlを介してホバー時に強調表示された領域を持つ画像を表示するページがあります。また、これらのホバーにほろ酔いツールチップを追加する作業も行っているため、画像の各部分が何と呼ばれているかがわかります。

Raphaël はハイライトされた領域を SVG で描画します。SVG 要素は DOM ノードでもあるため、Tipsy をそれらにアタッチすることは次のように簡単に実現できます。

// Get the path node as a jQuery object.
pathNode = $(path.node);

// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);

// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
  pathNode.tipsy({
    fade: true
  });
}

問題は軟膏で飛ぶだけで、この質問の理由は、ほろ酔いがツールチップを SVG ノードの横ではなく画面の上部 (座標 0,0) に描画するためであり、その方法がわかりません。修理する。Tipsy JavaScript をデバッグすると、ある時点で座標があるように見えますが、それでも正しい場所に描画できません。

誰でもそれを理解できますか？(詳細については、最小限のテスト ケースを参照してください)。

4

2 に答える 2

2

それらのヒントについては、 gRaphaëlを使用してみてください。

私が書いたばかりのこの例を参照してください: http://jsfiddle.net/3tHmp/

于 2011-02-19T17:08:23.013 に答える
0

デモでは、iPhone の 0,0 にツールチップも表示されています。部分が赤くなると、getBBox() を使用して最小 x と最小 y を識別できます。それに応じてチップを配置しますか?

于 2011-02-20T04:51:27.413 に答える