码迷,mamicode.com
首页 > 其他好文 > 详细

使用bootstrap中的toolTip插件时 最上方提示会被遮挡问题

时间:2019-06-03 12:21:19      阅读:425      评论:0      收藏:0      [点我收藏+]

标签:ace   详情   tps   bar   lan   nbsp   alt   html   部分   

Bootstrap 里的 popover 被挡住的解决方案

在Bootstarp 中我们可以使用 popover 插件做一些内容的展示,

代码如下:

<a data-toggle="popover" data-placement="top" data-trigger="hover" data-content="详情详情详情">
    <span>显示详情</span>
</a>

 

这样子写的话,如果父级有overflow:hidden属性,你会发现超出容器的部分会显示不出。

技术图片

 

如何解决呢?

我们只要在上面代码中添加一个属性:data-container="body"  即可。效果如下图:

技术图片

 

官方API解释:

技术图片

 

解决方案来自:

https://stackoverflow.com/questions/16863015/bootstrap-tooltip-working-but-hidden-due-to-z-index

使用bootstrap中的toolTip插件时 最上方提示会被遮挡问题

标签:ace   详情   tps   bar   lan   nbsp   alt   html   部分   

原文地址:https://www.cnblogs.com/nlyangtong/p/10966496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!