使用 d3 将 Bootstrap 工具提示绑定到动态创建的 SVG 元素答案

【问题标题】：Bind Bootstrap tooltip to dynamically created SVG element with d3使用 d3 将 Bootstrap 工具提示绑定到动态创建的 SVG 元素
【发布时间】：2023-03-25 19:04:01
【问题描述】：

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

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

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

在 SVG 中动态处理时要克服的两个问题：

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

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

$('[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

你能帮忙吗？

【问题讨论】：

您是否尝试过一个接一个地应用这些属性，而不是一次全部应用？
谢谢@LarsKotthoff。我不得不承认我不确定你的意思。（运行$('body').tooltip 两次，每次使用一个属性doesn't work，但我想这是可以预料的，因为第二个会覆盖第一个）
你的$() 中有两个不同的选择器。特别是$('body') 上的container: 'body' 可能会混淆它。我建议$('body').tooltip({selector:'[rel=tooltip]'}); 然后$('[rel=tooltip]').tooltip({container: 'body'});。
G.E.N.I.U.S. 请问，是否可以在 d3 中执行此操作？怎么样？
当然，您只需运行这段代码。它应该没有什么特别之处。

标签： javascript jquery twitter-bootstrap svg d3.js

【解决方案1】：

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

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

运行

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

【讨论】：