Как изменить позицию Bootstrap Popover после динамического вставки содержимого?

Ответ 1

Нет, нет повторного вычисления, и на самом деле нет простого способа сделать это. Тем не менее, вы можете динамически вводить popovers таким образом:

$('td.chartSection').on('mouseenter', function() {
    var myPopOverContent = 'This is some static content, but could easily be some dynamically obtained data.';
    $(this).data('container', 'body');
    $(this).data('toggle', 'popover');
    $(this).data('placement', 'top');
    $(this).data('content', myPopOverContent);
    $(this).popover('show');
});

$('td.chartSection').on('mouseout', function() {
    $(this).popover('hide');
});

Просто замените все свои js на вашей скрипке выше и проверьте это...

Ответ 2

Использование Bootstrap v3.3.7:

Вы можете расширить конструктор Popover, чтобы добавить поддержку функции повторного позиционирования. Вы можете разместить этот script ниже, где вы загружаете загрузочный файл.

JSFiddle Demo

<script src="bootstrap.js"></script>
<script type="text/javascript">
$(function () {
    $.fn.popover.Constructor.prototype.reposition = function () {
        var $tip = this.tip()
        var autoPlace = true

        var placement = typeof this.options.placement === 'function' ? this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement

        var pos = this.getPosition()
        var actualWidth = $tip[0].offsetWidth
        var actualHeight = $tip[0].offsetHeight

        if (autoPlace) {
            var orgPlacement = placement
            var viewportDim = this.getPosition(this.$viewport)

            placement = placement === 'bottom' &&
                pos.bottom + actualHeight > viewportDim.bottom ? 'top' : placement === 'top' &&
                pos.top - actualHeight < viewportDim.top ? 'bottom' : placement === 'right' &&
                pos.right + actualWidth > viewportDim.width ? 'left' : placement === 'left' &&
                pos.left - actualWidth < viewportDim.left ? 'right' : placement

            $tip
                .removeClass(orgPlacement)
                .addClass(placement)
        }

        var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)

        this.applyPlacement(calculatedOffset, placement)
    }
})
</script>

Затем в вашем script всякий раз, когда вам нужно изменить положение всплывающей подсказки после вставки содержимого. Вы можете просто позвонить:

$element.popover('reposition')

Ответ 3

Я только что назвал

button.popover('show');

И он снова позиционировал его.

Ответ 4

Я использовал этот код, чтобы отрегулировать высоту от popover, когда он уже загружен на страницу:

   var popover = $(this).closest('.popover');
   var sender = popover.prev();
   var adjustment = (sender.position().top - popover.height()) + 15;
   popover.css({ top: adjustment });

Переменная отправитель - это цель, в которой поппер центрируется.

Ответ 5

У меня была аналогичная ситуация, когда у меня был popover, который уже содержал некоторый HTML (загрузочный счетчик), и я менял контент, когда возвращался вызов ajax. В моей функции обратного вызова ajax это был код, который я использовал для изменения позиционирования, поэтому он оставался центрированным:

var originalHeight = $(popover).height();

$(popover).find('.popover-content').html(data);

var newHeight = $(popover).height();
var top = parseFloat($(popover).css('top'));
var changeInHeight = newHeight - originalHeight;

$(popover).css({ top: top - (changeInHeight / 2) });

Ответ 6

Если позиция popover является "верхней" (как в вопросе), вы можете просто отрегулировать ее абсолютное позиционирование в верхней части страницы.

Я создал функцию для определения высоты popover, а затем переместил ее на страницу по высоте.

function adjustPopoverHeight($popoverElement) {     
    var height = $popoverElement.height();
    var adjustment = 0 - height - 4;
    $popoverElement.css({ top: adjustment });
}

и использовать с запросом ajax для получения данных:

 $.ajax({
    type: 'GET',
    url: url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
}).done(function(dat) { 
    //set the popover content to whatever you like

    //adjust height of popover
    var $popoverElement = $('.popover');
    adjustPopoverHeight($popoverElement);
})

Ответ 7

Я принял концепцию ответа jme11 и обновился для Bootstrap 3.3.2 +

$('button')
  .popover({
    trigger: 'manual',
    html: true,
    container: 'body',
  })
  .click(function() {
    var $this = $(this);
    var popover_obj = $this.data('bs.popover');
    if (popover_obj.tip().hasClass('in')) {
      popover_obj.hide();
    } else {
      var opts = popover_obj.options;
      opts.content = $('<div/>').text('hello world');
      popover_obj.init('popover', $this, opts);
      popover_obj.show();
    }
  })
;

Там есть метод, называемый setContent для объекта popover, но по какой-то причине он не работал у меня. Если вы хотите попробовать, это будет выглядеть так:

popover_obj.setContent($('<div/>').text('hello world'));

Ответ 8

это вдохновлено ответом @AlexCheuk выше, но мне нужно было решение с использованием Bootstrap 2. Кроме того, в моем проекте мне не нужно было менять расположение поповеров, поэтому я вырезал это.

$(function() {
    $.fn.popover.Constructor.prototype.reposition = function () {
        console.log('popover reposition is called');
        var $tip = this.tip();

        var placement = typeof this.options.placement === 'function' ? this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement;

        var pos = this.getPosition();
        var actualWidth = $tip[0].offsetWidth;
        var actualHeight = $tip[0].offsetHeight;

        function getCalculatedOffset (placement, pos, actualWidth, actualHeight) {
            return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2 } :
                   placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
                   placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
                /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width };
        }

        var calculatedOffset = getCalculatedOffset(placement, pos, actualWidth, actualHeight);

        this.applyPlacement(calculatedOffset, placement);
        console.log(this);
    };
});

Чтобы назвать это:

$element.popover('reposition')

Ответ 9

После обновления содержимого Popover, если вы прокручиваете содержимое страницы вверх или вниз, Popover выполняет автоматическое позиционирование и снова становится доступным для чтения, поэтому более простой обходной путь для изменения положения Popover после динамического обновления содержимого заключается в прокрутке вниз и вверх на 1 пиксель. на странице через чистый JavaScript:

var y = $(window).scrollTop();//your current y position on the page $(window).scrollTop(y+1).scrollTop(y-1);