Question

我有一个简单文本输入的以下代码，我想有一个popover来提供一些额外的信息，但是当我调整页面大小时，popover是静态的。 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
您需要use the container Popover option并将其设置为目标比body更本地化的内容：

container

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

Answer 2

如上所述here：

有两种方法可以解决这个问题 - 要么你可以监听调整大小并在活动弹出窗口上调用.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

尝试更改＆＃39;展示位置＆＃39;到＆＃39;自动＆＃39;

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

Bootstrap Popover不在页面调整大小

5 个答案:

`container`