rastel.js图形的Bootstrap/jQuery UI弹出窗口

Question

我有一些弹出窗口,我想触发'悬停'raphael.js图形的某些元素,但我似乎无法让它们工作(使用jQuery UI和Bootstrap).

我通过引用指定的类在网站上调用popovers:

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

:然后我就可以通过添加相关属性的HTML标签触发popovers class="show-popover",rel="popover",data-trigger="hover",等.

我在网站上也有一些嵌入式raphael.js SVG图形.在我添加了上面提到的相同属性之后,我似乎无法在raphael.js图形的元素(路径,文本等)上显示弹出窗口.

假设我在图形中添加了一个方块; 然后,我可以将所需的popover属性添加到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/

Answer 1

默认情况下,Bootstrap将popover元素附加为触发元素的兄弟.在这种情况下,它将popover添加为SVG节点的子节点.由于div标签不能在SVG节点内呈现,因此不显示任何内容.为了解决这个问题,我一个附加div的body,以充当酥料饼的持有人,并定位,并通过对DOM鼠标事件触发它circleSVG元素.

这是一个想法:

// 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');

然后在触发逻辑中,更新pop-over元素的数据属性,如下所示:

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

我更新了上面的小提琴链接.