Bootstrap 3工具提示删除图像填充

Question

我有一系列img标签，其中悬停时出现了Bootstrap 3工具提示。当您将鼠标悬停在它们上方时，会显示工具提示，但会删除图像填充并将它们全部串在一起;看第一和第二个截图：

这是我的代码：

<img src="//minotar.net/helm/pommmes/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="pommmes" />
<img src="//minotar.net/helm/kittycaitie/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="kittycaitie" />
<img src="//minotar.net/helm/1stBoss11111/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="1stBoss11111" />
<img src="//minotar.net/helm/iGalaxHD/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="iGalaxHD" />
<img src="//minotar.net/helm/liamflaherty63/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="liamflaherty63" />
<img src="//minotar.net/helm/Fields/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="Fields" />
<img src="//minotar.net/helm/MarkoGameZ/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="MarkoGameZ" />
<script>
    $(function(){
        $('[data-toggle=tooltip]').tooltip({
            trigger: 'hover'
        }) 
    });
</script>

Answer 1

看起来这是webkit呈现问题。您使用的原始标记包含内联元素，看起来大致如下：

<img src="//minotar.net/helm/pommmes/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="pommmes" />
<img src="//minotar.net/helm/kittycaitie/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="kittycaitie" />
<img src="//minotar.net/helm/1stBoss11111/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="1stBoss11111" />

由于默认情况下img是内联元素，因此浏览器会考虑它们之间的空格，包括换行符。这些空白被渲染为图像之间的初始边距。这是你认为的正常＆＃34;。

当您将鼠标悬停在图片上时会发生的情况是图片被包装到div容器中，这就是Bootstrap显示工具提示的方式，因为它无法将工具提示元素附加到img它创建包装器容器暂时放置工具提示。

但是，在两个内联元素之间插入div会破坏之前的空白呈现，并且由于某种原因，在删除包装时它不会被还原。

最简单的解决方法是初始化工具提示，如下所示：

$(function() {
    $('[data-toggle=tooltip]').tooltip({
        trigger: 'hover',
        container: 'body'
    })
});

指示Bootsrap将工具提示附加到body容器而不是悬停元素。

在下面的演示中，尝试注释掉container: 'body'并查看错误行为是如何回来的。

演示： http://plnkr.co/edit/4bTvaKzP1qY1CRs3q0OK?p=preview