使bootstrap popover重叠 [英] Make bootstrap popover overlap

问题描述

我的问题是我使用bootstrap的popover作为图像，使用悬停作为触发器，而在同一时间，我使用Smoothdivscroll（ http://www.smoothdivscroll.com/#quickdemo ），但问题是，弹出窗口的一部分被隐藏。

My problem is I am using bootstrap's popover for an image, using the hover as trigger, while at the same time, I'm using the Smoothdivscroll (http://www.smoothdivscroll.com/#quickdemo) but the problem is, that part of the popover is hidden.

示例< a href =http://cl.ly/image/0I081R1Z460t> http://cl.ly/image/0I081R1Z460t
正如你所看到的，popover的一部分（右侧）是隐藏在div下面。这个问题在截图中是最小的，但是当我把它放在最后一个图片上，你根本看不到它。

Example http://cl.ly/image/0I081R1Z460t As you can see, part of the popover (right side) is hidden under the div. The problem is minimal in the screenshot, but when I put it on the last image you can't see it at all.

我尝试改变z-index，没有工作。

I tried changing the z-index but it didn't work.

Popover的默认代码：

Popover's default code:

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  width: 236px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

SmoothDivScroll默认代码：

SmoothDivScroll default code:

div.scrollWrapper {
 position: relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
}

感谢。

推荐答案

由于对工具提示和popovers的方式进行了一些更改（参见这个提交），有溢出元素的错误。

Since some changes were made to the way the tooltips and popovers are included (see this commit), there has been bugs about overflowing elements.

我们可以调整你的标记使其工作，有一些 overflow：visible ，但是修补程序将在下一个版本（2.3.0）中可用，如此提交。

We could tweak your markup to make it work, with some overflow: visible but a fix will be available in the next version (2.3.0) as shown by this commit.

简单地说，您可以下载下一个版本或将更改的更改应用到您的文件，以允许您的popover像这样：

Simply put, you can download the next version or apply the changes of the commit to your files to allow your popover to be used like that :

$('.popover').popover({
    container: 'body'
});

或使用数据属性： data-container =body code>。

Or use the data attibutes : data-container="body".

这篇关于使bootstrap popover重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！