Bootstrap 3 Popover 隐藏在溢出隐藏的元素后面答案

【问题标题】：Bootstrap 3 Popover gets hidden behind the element which overflow is hiddenBootstrap 3 Popover 隐藏在溢出隐藏的元素后面
【发布时间】：2014-05-13 13:45:09
【问题描述】：

请先花几秒钟看一下代码。我正在使用 BS3。

HTML

<div class="my-div">
  <a href="#">A link</a>
</div>
<div class="cool-div">
 <p>bla and bla</p>
</div>

JS：

// Make PopOver stay while one mouseover on it
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

// Show User Details PoPOver 
$('.my-div').popover({
    trigger: 'hover', 
    placement: 'auto',
    html:true, 
    delay: {show: 50, hide: 400}, 
    content: function () {
            return $(this).next('.cool-div').html();
        }
});

// Make some custom styling on User Details PoPOver 
$(function () {
    $('.my-div').on('shown.bs.popover', function () {
        var $this = $(this),
            popover = $this.next('.popover');
            popover.find('.popover-content').css({padding: '5px 5px 8px 5px', 'margin-right':'-18px'});
    });
});

好的，所以我所做的就是在第一段代码中将鼠标悬停在 PopOver 上，然后显示它和一些自定义样式。

现在，一切都很好，但在一些较小的分辨率下，我有一个 overflow:hidden 的 div，导致我的 Popover 隐藏在其中。我增加了 .popover 的 z-index 值，没用..
我研究并尝试了 container:'body' 或 container:'my-div' 以及 data-container="body" in html。

虽然它解决了问题，但是当鼠标悬停在其中时弹出框并没有停留，并且 css 也没有附加。

我怎样才能同时实现这三个方面？非常感谢。

【问题讨论】：

标签： jquery html css twitter-bootstrap-3 popover

【解决方案1】：

您能否发布您的代码的完整示例，包括具有溢出：隐藏的 div，以便我可以查看完整的问题。我不知道你把另一个 div 放在哪里，所以现在有点难以解决:)

这里有一些可能不需要的建议:)

我通常向要控制的元素添加（或切换）CSS，而不是向其添加 CSS 属性。所以而不是：

popover.find('.popover-content').css({padding: '5px 5px 8px 5px', 'margin-right':'-18px'});

我会使用：

popover.find('.popover-content').addClass("styleme");

问候，

【讨论】：