Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align popover to bottom left

How could I make the popover bottom div do not go beyond the popover button right side, like in the image: enter image description here

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

like image 613
BernardoLima Avatar asked Nov 24 '14 17:11

BernardoLima


People also ask

How do you align popovers?

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"]').

How do you use Bootstrap popovers?

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.

How does bootstrap define popover?

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.


1 Answers

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

like image 149
Sebsemillia Avatar answered Sep 28 '22 03:09

Sebsemillia