3

我想用 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

你能帮我吗？

4

1 回答 1

6

如果您分别运行两段代码而不是一起运行，它会起作用，即，而不是

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

跑

$('body').tooltip({
  selector: '[rel=tooltip]'
});
$('[rel=tooltip]').tooltip({
  container: 'body'
});
于 2013-09-26T09:38:10.343 回答