Bootstrap 3 Tooltip 删除图像填充答案

【问题标题】：Bootstrap 3 Tooltip removes image paddingBootstrap 3 Tooltip 删除图像填充
【发布时间】：2015-06-14 13:36:02
【问题描述】：

我有一系列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>

【问题讨论】：

James，你能举个例子吗？
这是 CSS 问题，你能发布样式吗？
特别是不属于特定类的 img 样式
现场示例：eastsussexcoach.com/james
Whit Firefox 您的示例工作正常

标签： javascript jquery html css twitter-bootstrap

【解决方案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

【讨论】：