Выровнять по центру слева внизу

Как я могу сделать нижний div для popover не выходить за пределы кнопки popover справа, как на изображении: enter image description here

Здесь мой код.

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

ОТВЕТЫ

Ответ 1

Вы можете попробовать что-то вроде этого и приспособить его к вашим требованиям:

1.) Установите положение стрелки через CSS:

.popover.bottom .arrow {
    left:90% !important;
}

2.) Установите положение popover после события клика. С вашим примером кода это может выглядеть так:

$('[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'); 
              });

Рабочий пример

Ответ 2

С помощью Bootstrap v4 вы можете использовать свойство 'offset', предоставляемое Tether:

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

Это приведет к смещению содержимого popover, но вам все равно придется использовать CSS для смещения стрелки

Ответ 3

То, как я это сделал, - это использовал событие insert.bs.popover и установил там смещение, поскольку ширина всплывающего окна до сих пор неизвестна. Это выравнивает всплывающее окно слева от элемента управления:

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';
});