Bootstrap Popover不在页面调整大小

Question

我有一个简单的文本输入的以下代码，我想有一个弹出窗口提供一些额外的信息，但是当我调整页面大小时，弹出窗口是静态的。 HTML：

<form action = "" id = "userInput" onsubmit = "return validateInput(this);" method = "GET">
    <div class="form-group" id = "input1">
        <label for="textInput">Input area</label>
        <input type="text" name = "userInput" class="mainInput" id="textInput" autofocus required autocomplete = "off">
    </div>
</form>

javascript：

$(document).ready(function () {
    $('.mainInput').popover({'trigger': 'focus', 'placement': 'right', 
     'container': 'body', 'html': true, 'content': 'a simple popover'});
});

Answer 1

请参阅https://github.com/twbs/bootstrap/issues/9517
您将要使用container Popover选项并将其设置为比body更本地的目标：

container

将popover追加到特定元素。 示例： container: 'body' 。 此选项特别有用，因为它允许您将弹出窗口放置在触发元素附近的文档流中 - 这将防止弹出窗口在窗口大小调整期间从触发元素浮动。

Answer 2

如前所述这里 ：

有两种方法可以解决这个问题 - 要么你可以监听调整大小并在活动弹出窗口上调用.popover（'show'）（这将调整popover的大小） - 或者更好的方法是使用容器选项以便将弹出窗口置于带有触发元素的文档流

一个简单的例子：

<p id="paragraph">Paragraph</p>
<script type="text/javascript">
    // Show popover on page load
    $('#paragraph').popover({'content': 'test'}).popover('show');

    // Bind resize event
    $(window).bind('resize', function(){
        $('#paragraph').popover('show');
    });
</script>

Answer 3

如果可见则隐藏并稍后显示

$(window).on('resize', function() {
            if($('#div').data('bs.popover').tip().hasClass('in') == true) {
                $("#div").popover('hide');
                $("#div").popover('show');
            }
    });

Answer 4

$(document).ready(function(){
popover_position();
});
$(window).resize(function(){
popover_position();
});
function popover_position(){
    var get_left = ($('.mainInput').offset().left) + (($('.mainInput').width() + (padding left + paddeing right) ) /2)-($('.popover').width() / 2);        
    $('.popover').css({'left': parseInt(get_left)+'px' , 'right':'auto'});
    $('.arrow').css('left','50%');                              
 }
*(padding left + paddeing right) replace with padding left and padding right given if given for example :- ($('.mainInput').width() + 49) / 2) , here 49 is total padding(left + right)

Answer 5

尝试将“展示位置”更改为“自动”

$(document).ready(function () {
    $('.mainInput').popover({'trigger': 'focus', 'placement': 'auto', 
     'container': 'body', 'html': true, 'content': 'a simple popover'});
});