如何修復無法使用按鈕網格的工具提示？

Question

我正在閱讀工具提示的bootstrap API。 我建立了一個按鈕網格，當我將鼠標懸停在按鈕上時，希望能夠顯示工具提示。

問題

看圖片。 這是普通網格。

看下面的圖片。 注意如何將所有按鈕推向右側和左側，並出現工具提示。 這不是所需的行為。

代碼（在代碼鏈接中自行查看）

我有一個龐然大物 ，您可以在這里看到演示了整個問題。 將鼠標懸停在第二行按鈕上，即可查看所有地獄狀況。

我可以在其上使用工具提示的按鈕的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對象之上？ 不將物體推開嗎？

我想知道是否一定是因為data-toggle屬性與我的toggleClass javascript產生沖突？ 沒辦法吧 因此，我嘗試在沒有數據切換屬性的情況下使用工具提示，但是如果沒有此組件，就無法調用工具提示。

我也進行了大量的谷歌搜索，並且我閱讀的所有內容都表明我不應該遇到此問題，並且應該開箱即用。

如果有更多經驗的人可以幫助我指出正確的方向，我將非常感激。 我花了一些這方面的時間，我喜歡這種感覺的權利現在 。

注意

我正在使用IE Explorer來顯示此行為。 這很重要，因為我的客戶使用IE。

Answer 1

這是工作中的小伙伴： http ://plnkr.co/edit/THgloUwFUDkpv5odRGYv? p= preview

將您的JavaScript更改為

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