绑定Bootstrap工具提示以使用d3动态创建SVG元素

Question

我想用d3动态创建一个SVG元素，并将Bootstrap工具提示绑定到它。

在非动态HTML方案中，这些工具提示的绑定如下：

$('[rel=tooltip]').tooltip

在SVG中动态执行时需要克服的两个问题：

1）SVG中包含的HTML div不会呈现

解决方案是使用选项1，2）中的container属性works great：

$('[rel=tooltip]'').tooltip({
  container:'body'
});

2）页面加载时元素不存在

advice here是使用selector属性，这会导致工具提示对象被委托给指定的目标。这有效：

$('body').tooltip({
  selector: '[rel=tooltip]'
});

当我尝试将两种方法结合起来时出现问题（参见fiddle）：

 $('body').tooltip({
   container: 'body',
   selector: '[rel=tooltip]'
 });

这似乎忽略了容器属性，并将工具提示附加到SVG的主体内，而不显示它。这个例子的另一个问题是属性的顺序很重要 - 如果它们被颠倒它根本不起作用。

问题是如何同时解决这两个问题？

一种可能更清洁并提供更多控制的方法是在创建元素时直接在d3中附加函数，或者在发生鼠标事件时。我试过了：

.on('mouseenter', $(@).tooltip({container: 'body'}));

其中TypeError: listener.apply is not a function

你能帮忙吗？

Answer 1

如果您分别运行两段代码而不是一起运行，则可行，即代替

$('body').tooltip({
  container: 'body',
  selector: '[rel=tooltip]'
});

运行

$('body').tooltip({
  selector: '[rel=tooltip]'
});
$('[rel=tooltip]').tooltip({
  container: 'body'
});