I have the following code for a simple text input and I want to have a popover to give some additional information, however when I resize the page, the popover is static. The 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 autoplete = "off">
    </div>
</form>

The javascript:

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

I have the following code for a simple text input and I want to have a popover to give some additional information, however when I resize the page, the popover is static. The 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 autoplete = "off">
    </div>
</form>

The javascript:

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

• javascript
• jquery
• html
• twitter-bootstrap

5 Answers 5

See https://github./twbs/bootstrap/issues/9517
You'll want to use the container Popover option and set it to something more local to the target than body:

container

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

As stated here:

there's two ways to address this – either you can listen to resize and call .popover('show') on active popovers (which will resize the popover) – or the better way is to use the container option so that the popover is positioned in the flow of the document with the triggering element

A simple example:

<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>

if visible then hide and later show

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

$(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)

try changing 'placement' to 'auto'

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