0

raphael.jsグラフィックのいくつかの要素の「ホバー時に」トリガーしたいポップオーバーがいくつかありますが、それらを機能させることができないようです（jQuery UIとBootstrapを使用）。

指定されたクラスを参照して、サイトでポップオーバーを呼び出しています。

$(document).ready(function() {
  $('.show-popover').popover();
});

次に、関連する属性をHTMLタグに追加することで、ポップオーバーをトリガーできます：class="show-popover"、、、rel="popover"などdata-trigger="hover"。

また、サイトにはraphael.jsSVGグラフィックが埋め込まれています。上記と同じ属性を追加した後、raphael.jsグラフィックの要素（パス、テキストなど）にポップオーバーが表示されないようです。

グラフィックに正方形を追加するとします。次に、必要なポップオーバー属性を次のようにraphael.jsの正方形に追加できます。

square.node.setAttribute('class', 'show-popover');
square.node.setAttribute('rel', 'popover');
square.node.setAttribute('data-trigger', 'hover');
square.node.setAttribute('data-original-title', 'Popover title');
square.node.setAttribute('data-content', 'Main popover text here...');

Firebugを使用して属性がSVGに追加されていることがわかりますが、ポップオーバーがホバーに表示されていません。

raphael.jsグラフィックの要素にカーソルを合わせるためにポップオーバーをトリガーすることは可能ですか？

[編集]例http://jsfiddle.net/cQGQT/を参照してください

4

1 に答える 1

5

デフォルトでは、Bootstrap はポップオーバー要素をトリガー要素の兄弟として追加します。この場合、ポップオーバーを SVG ノードの子として追加しています。divタグは SVG ノード内でレンダリングできないため、何も表示されません。これを回避するために、ポップオーバーのホルダーとして機能する を に追加し、divSVG要素bodyの DOM マウス イベントを介して配置および切り替えました。circle

これがアイデアです：

// ps is absolutely positioned div in body
ph.popover({
  trigger: 'manual',
  title: 'Popover Title',
  content: 'Popover Content',
  animation: false
});

$('circle').on('mouseover', function(evt){
  var targ = $(evt.target),
  off = targ.offset(),
  r = parseInt(targ.attr('r')); 
  ph[0].style.left = (off.left + r*2) + 'px';
  ph[0].style.top = (off.top + r) + 'px';
  ph.popover('show');
}).on('mouseout', function(evt){
  ph.popover('hide');  
});

そして完全なフィドル: http://jsfiddle.net/BzJCq/2/

これが最善のアプローチかどうかはわかりませんが、正しい方向だと思います。ポップオーバー設定で「セレクター」オプションを使用することもできますが、ポップオーバーをそのように配置するのは少し難しいと思います。

[編集 - タイトル/コンテンツの入れ替えに対応]

どのノードがそれをトリガーしているかに基づいてポップオーバーの内容を交換したい場合は、次のようにすることができます:

// add different popover data to circles
circle.node.setAttribute('pop-title', 'Red Circle');
circle.node.setAttribute('pop-content', 'Content for the red one');

circle2.node.setAttribute('pop-title', 'Green Circle');
circle2.node.setAttribute('pop-content', 'Content for the green one');

次に、トリガー ロジックで、ポップオーバー要素のデータ属性を次のように更新します。

// ph is the element holding the popover
ph.attr('data-original-title', targ.attr('pop-title'));
ph.attr('data-content', targ.attr('pop-content'));

上記のフィドルリンクを更新しました。

于 2013-01-15T18:46:43.587 に答える