CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
BernardoLima
BernardoLima

Reputation: 1141

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

Upvotes: 19

Views: 23936

Answers (4)

Gustavo Straube
Gustavo Straube

Reputation: 3861

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

    // ...

    popperConfig: {
        placement: 'bottom-end',
    },
});

All the supported placement variations are:

  • top-start
  • top-end
  • bottom-start
  • bottom-end
  • left-start
  • left-end
  • right-start
  • right-end

Upvotes: 3

John
John

Reputation: 123

The way I did it is to use the inserted.bs.popover event and set the offset there, since the width of the popover is unknown until then. This aligns the popup window to the left of the control:

var elWidth = inputElement.width();

inputElement.popover({
    container: 'body',
    animation: true,
    content: Msg,
    placement: 'top',
    trigger: 'hover'
}).on('inserted.bs.popover', function (e) {
    var id = $(this).attr("aria-describedby");
    var popover = $("#" + id);
    popover.data()['bs.popover'].config.offset = parseInt((popover.width() - elWidth) / 2, 10) + 'px';
});

Upvotes: 1

Michael Multari
Michael Multari

Reputation: 51

With Bootstrap v4, you can use the 'offset' property provided by Tether:

// Enable all popovers and tooltips
$('[data-toggle="popover"]').popover({
    html: true,
    offset: '0 100px' //offset the popover content
});

This will offset the popover content, but you will still need to use CSS to offset the arrow

Upvotes: 5

Sebsemillia
Sebsemillia

Reputation: 9476

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

Upvotes: 10

Related Questions