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

Question

我想用d3动态创建一个SVG元素并绑定一个Bootstrap工具提示.

在非动态HTML方案中,这些工具提示的绑定方式如下:

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

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

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

该解决方案是使用container属性的选项(1,2),它的伟大工程:

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

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

这里的建议是使用selector导致工具提示对象委托给指定目标的属性.这有效:

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

当我尝试结合两种方法时出现问题(见小提琴):

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