如何修复无法使用按钮网格的工具提示？

Question

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

问题

见图。这是正常的网格。

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

代码（在plunker链接中自己查看）

我有一个plunke r，你可以在这里看到它演示了整个问题。鼠标悬停在第二行按钮上，看到所有地狱都松了一圈。

我可以使用工具提示的按钮的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后添加了以下javascript，btn-group类型的东西存在问题。我添加了以下内容：

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

它会产生完全相同的问题。真的挠我的头。

摘要

这对我没有任何意义。我认为工具提示的全部内容是让其他内容位于其背后的DOM对象之上？不要把物体推开？

我想知道是否必须因为数据切换属性与我的toggleClass javascript打架？没办法吧？所以我尝试使用工具提示而没有数据切换属性，但是如果没有这个组件，我就无法调用工具提示。

我也做了大量的谷歌搜索，我读到的所有内容都表明我不应该遇到这个问题而应该开箱即用。

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

注

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

Answer 1

这是工作的插件：http://plnkr.co/edit/THgloUwFUDkpv5odRGYv?p=preview

将您的javascript更改为

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