javascript - 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 是内联元素，默认情况下浏览器尊重它们之间的空格，包括换行符。这些空白被呈现为图像之间的初始边距。这就是您认为的“正常”。

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

然而，在两个内联元素之间插入的 div 会破坏之前的空白渲染，并且出于某种原因，当包装器被移除时它不会恢复。

最简单的修复方法是像这样初始化工具提示:

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

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

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

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