Bootstrap Popover not moving on page resize

Question

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 autocomplete = "off">
    </div>
</form>

The javascript:

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

Answer 1

See https://github.com/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.

Answer 2

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>