javascript - 使用 d3 将 Bootstrap 工具提示绑定(bind)到动态创建的 SVG 元素

Question

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

在非动态 HTML 场景中，这些工具提示是这样绑定(bind)的:

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

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

1) SVG 中包含的 HTML div 不呈现

解决方案是在选项( 1 , 2 )中使用 container 属性，其中 works great :

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

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

advice here是使用 selector 属性，它使工具提示对象被委托(delegate)给指定的目标。这有效:

$('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'
});