How could I make the popover bottom div do not go beyond the popover button right side, like in the image:
Here's my code.
HTML:
<a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="<input>">
Search
</a>
Javascript:
$('[data-toggle="popover"]').popover({
trigger: 'manual',
placement: 'bottom',
html: true
}).click(function (e) {
e.preventDefault();
$(this).popover('show');
});
Bootply:
http://www.bootply.com/3SLzUgPyrV
It's possible to use bottom-end placement to align the popover relative to the bottom right of the parent element. However, that's not supported by Bootstrap popover. You'll need to pass that to Popper through popperConfig option, this way: $('[data-toggle="popover"]').
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.
You could try something like this and adapt it to your requirements:
1.) Set the position of the arrow via CSS:
.popover.bottom .arrow {
left:90% !important;
}
2.) Set the position of the popover after the click event. With your code example it could look like this:
$('[data-toggle="popover"]').popover({
trigger: 'manual',
placement: 'bottom',
html: true
}).click(function (e) {
e.preventDefault();
// Exibe o popover.
$(this).popover('show');
$('.popover').css('left', '63px');
});
Working Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With