javascript - 如何修复不适用于按钮网格的工具提示？

Question

我正在阅读 tooltip 的 bootstrap api 。我构建了一个按钮网格，并且希望当我将鼠标悬停在按钮上时能够显示工具提示。

问题

看图。这是正常的网格。

看下面的图片。请注意所有按钮是如何推到右侧和左侧并出现工具提示的。这不是期望的行为。

代码(在 plunker 链接中亲自查看)

我有一个plunke您可以在此处看到它演示了整个问题。将鼠标悬停在第二行按钮上即可看到一切都乱套了。

可以使用工具提示的按钮的 HTML 代码如下所示:

<button type="button" class="btn btn-default bin-well bin-col-5" data-toggle="tooltip" data-placement="top" title="Tooltip on left"></button>​

在阅读 boostrap api 中 btn-group 类型的内容存在问题后，我添加了以下 JavaScript。我添加了以下内容:

 $('.btn-group').tooltip({'container':'body', 'placement':'top'});​

它产生了完全相同的问题。真是让人摸不着头脑。

摘要

这对我来说没有任何意义。我认为工具提示的全部要点是在其后面的 DOM 对象之上添加额外的内容？不把挡道的物体推开吗？

我想知道是否一定是因为 data-toggle 属性与我的toggleClass javascript 发生冲突？没办法吧？因此，我尝试在没有数据切换属性的情况下使用工具提示，但如果没有此组件，我无法调用工具提示。

我还进行了大量的谷歌搜索，我读到的所有内容都表明我不应该遇到这个问题，它应该可以开箱即用。

如果有更多经验的人可以帮助我指明正确的方向，我将非常感激。我在这上面花了一些时间，我感觉是这样的now .

注意

我正在使用 IE Explorer 来显示此行为。这很重要，因为我的客户使用 IE。

Answer 1

这是工作原理:http://plnkr.co/edit/THgloUwFUDkpv5odRGYv?p=preview

将您的 JavaScript 更改为

$('[data-toggle="tooltip"]').tooltip({container: 'body'});