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

How to fix my tooltip that is not working with grid of buttons?

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

问题

见图。这是正常的网格。

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

代码(在plunker中自己看link)

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

我可以在其上使用工具提示的按钮的 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。

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

将您的 javascript 更改为

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