0

我有一些弹出框，我想触发 raphael.js 图形的某些元素的“悬停”，但我似乎无法让它们工作（使用 jQuery UI 和 Bootstrap）。

我通过引用指定的类来调用网站上的弹出框：

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

然后我可以通过将相关属性添加到 HTML 标签来触发弹出窗口：class="show-popover"、、、rel="popover"等data-trigger="hover"。

我在网站上还有一些嵌入式 raphael.js SVG 图形。在添加了上面提到的相同属性后，我似乎无法让 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 将 popover 元素附加为触发元素的同级元素。在这种情况下，它将弹出框添加为 SVG 节点的子节点。由于div标签在 SVG 节点内不可渲染，因此不会显示任何内容。为了解决这个问题，我将 a 添加div到body以充当弹出框的持有者，并通过circleSVG 元素的 DOM 鼠标事件定位和切换它。

这是想法：

// 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 回答