jquery - Bootstrap 3 Popover 隐藏在 overflow hidden 的元素后面

Question

请先花几秒钟看一下代码。我正在使用 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" HTML。

虽然它解决了问题，但当鼠标悬停在其中时，弹出窗口不会停留，而且 css 也不会附加。

我怎样才能同时实现这三个目标？ 提前致谢。

Answer 1

请您发布完整的代码示例，包括上面有 overflow:hidden 的 div，这样我就可以查看完整的问题。 我不知道你把另一个 div 放在哪里，所以现在有点难以解决 :)

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

我通常向要控制的元素添加(或切换)CSS，而不是向其添加 CSS 属性。 所以代替:

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

我会使用:

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

问候，