Align popover to bottom left

twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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

Original source