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'});
});