Make bootstrap replenishment overlap

Question

My problem is that I am using bootstrap popover for the image, using hovering as a trigger, and at the same time I am using Smoothdivscroll ( http://www.smoothdivscroll.com/#quickdemo ), but the problem is that part of the popover hidden.

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

I tried changing z-index, but it did not work.

The default code for Popover is:

.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%; } 

Thanks.

Answer 1

Since some changes were made to the way that tooltips and popovers are enabled (see this commit ), errors were detected in the overflow of elements.

We could configure your markup to work with some overflow: visible , but the fix will be available in the next version (2.3.0), as this commit shows.

Simply put, you can download the next version or apply commit changes to your files so your popover can be used as follows:

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

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