如何在可滚动列表上显示弹出窗口？

Question

我在bootstrap 3中遇到弹出窗口问题。我在ExpectedConditions.visibilityOfElement()标签中有一个列表，我在照片中显示通知。

但为了使<ul>可滚动，我在其上应用了一些css，如下所示：

<ul>

滚动工作正常，但.scrollable-menu { max-height: 25em; overflow-x: hidden; } 属性也隐藏了弹出窗口内容。试图覆盖弹出窗口上的overflow-x但是没有用。我也试过overflow-x但没有成功......

有人知道如何解决这个问题吗？提前谢谢。

Answer 1

您可以将placement设置为右侧，或将overflow-x: visible设置为.scrollable-menu。

in html：

<a href="#" data-toggle="popover" data-placement="right" data-trigger="hover" data-content="Content">Hover</a>

JS：

$('.popover').popover({
    trigger:'hover',
    placement: 'right'
});

更新：

你可以将popover追加到body，如下所示：

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

并将z-index设置为高级别。

Answer 2

我更新了指令，比如@ Damon.s建议我并且工作得很好。

$(el).popover({
      trigger: 'hover',
      html: true,
      container: 'body',
      content: '<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>',
      placement: 'bottom'
 });