Bootstrap工具提示推动以下元素

Question

我有一列图像也是超链接。悬停时，我想在顶部显示工具提示。我的代码如下：

<div id="suite">

<div class="row">
    <div class="col-md-7 col-centered">
        <a href="#"><img src="~/Content/images/evr2est.png" data-toggle="tooltip" title="DAART AdobeConnect link for training purposes"/></a>


        <a href="#"><img src="~/Images/AdobeConnect.jpg" data-toggle="tooltip" title="DAART AdobeConnect link for training purposes" /></a>


        <a href="#><img src="~/Images/AdobeConnect.jpg" data-toggle="tooltip" title="DAART AdobeConnect link for training purposes" /></a>
    </div>
</div>

这是我的JQuery：

    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });

工具提示可以完美地工作，但是，如果将鼠标悬停在前两个图像中的任何一个上，它都会将其下方的图像显着向下推（即使工具提示实际上位于顶部），这会产生非常有害的效果。我还尝试了其他人建议的数据容器：“ body”，虽然可以解决下推问题，但它会将工具提示弄到了不居中的位置，并且下划线贯穿了整个页面。

感谢您的帮助。