Bootstrap Popover does not resize to page size
I have the following code for simple text input and I want the popover to provide some additional information, however when I resize the page the popover is static. 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'});
});
See https://github.com/twbs/bootstrap/issues/9517
You will want to use the container
Popover option and set it to something more local to the target than body
:
container
Adds a popover to a specific element. Example
container: 'body'
. This parameter is especially useful because it allows you to place a popover in the document flow next to the launcher, which will prevent the popover from floating away from the launcher when the window is resized.
As stated here :
there are two ways to tackle this issue, you can listen for resize and call .popover ('show') on active popovers (which will resize the popover) - or better way is to use a container option so that the popover is positioned in the document flow using the triggering element
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 then 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'});
});