文章/答案/技术大牛

发布

社区首页 >问答首页 >引导3工具提示删除图像填充

问引导3工具提示删除图像填充
EN

Stack Overflow用户

提问于 2015-06-14 13:36:02

回答 1查看 209关注 0票数 2

我有一系列的img标签与引导带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>

html

css

twitter-bootstrap

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-14 14:18:19

看起来这是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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30830025

复制

相似问题

问引导3工具提示删除图像填充
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3工具提示删除图像填充EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导3工具提示删除图像填充
EN