代码之家 › 专栏 › 技术社区 › Scaramouche

允许Bootstrap4的popover溢出屏幕

popper.js bootstrap-popover bootstrap-4

0

Scaramouche · 技术社区 · 6 年前

我想用BS4波普尔.js-基于popover功能。

我在显示事件时动态添加内容,我需要它固定在触发按钮上,让主体滚动,而不是在没有空间容纳内容时移动到屏幕顶部。

this answer 应该是在暗示,但不幸的是没有。

桑克斯

$('#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>

1 回复 | 直到 6 年前

1

0

Iulius 6 年前

将容器从body更改为要附加到的按钮,它将呈现按钮内的弹出窗口。然后您将不得不稍微修改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>