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'});
});
Share
Improve this question
asked Sep 12, 2014 at 18:10
RyanRyan
611 silver badge5 bronze badges
5 Answers
Reset to default 3See 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'});
});