允许 Bootstrap4 的弹出框溢出屏幕

Question

我正在尝试使用 BS4 的基于 Popper.js 的弹出框功能。

我在显示的事件上动态地向它添加内容，我需要它保持锚定在触发按钮上并让正文滚动而不是在其内容没有空间时移动到屏幕顶部。

我真的认为this answer 应该是在暗示，但不幸的是没有。

下一个示例是使用静态内容制作的，但我实际上是在页面加载时使用动态内容填充弹出框，因此请在您的答案/cmets 中考虑到它。

感谢

内容很少的示例

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});

button{
  position: absolute;
  right: 0
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="WANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

包含大量内容的示例

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});

button{
  position: absolute;
  right: 0
}

#explain{
position: absolute;
left: 0;
display: none
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

Answer 1

将容器从主体更改为您想要附加到的按钮，它将在按钮内呈现弹出窗口。然后，您将不得不稍微改变 css 以满足您的需要。示例：

$('#show-popover').popover({
        container: '#show-popover',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});

button{
  position: absolute;
  right: 10px;
  width: 200px;
}

button .arrow {left:50%; margin-left: -8px;}
button .popover {top: 20px !important;}

#explain{
position: absolute;
left: 0;
display: none
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover"  data-placement="top" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>