Make bootstrap popover overlap

Question

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.

Example https://dzwonsemrish7.cloudfront.net/items/2a3e0g0J1K0O3l3m0u2C/Screen%20Shot%202013-01-31%20at%2020.01.06.png?v=cf069cc3 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.

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

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 default code:

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

Answer 1

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

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.

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'
});

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