如何在動態內容插入後重新定位Bootstrap彈出窗口？

Question

所以基本上每當我加載一個空選項的Bootstrap Popover並動態插入內容時，popover就會失去它的正確位置。

例如：

$('td.chartSection').each(function() { 
    var $thisElem = $(this); 
    $thisElem.popover({ 
     placement: 'top', 
     trigger: 'hover', 
     html: true, 
     container: $thisElem, 
     delay: { 
      hide: 500 
     }, 
     content: ' ' 
    }); 
}); 

//After popup is shown, run this event 
$('td.chartSection').on('shown.bs.popover', function() { 
    var $largeChart = $(this).find('.popover .popover-content'); 

    //Insert some dummy content 
    $largeChart.html("dfjhgqrgf regqef f wrgb wrbgqwtgtrg <br /> wfghjqerghqreg fbvwqbtwfbvfgb <br />efgwetrg"); 
}); 

我的問題：

是否有可以重新計算，如$('td.chartSection').popover('recalculate')的popovers位置的方法。

或者還有另一種方法來重新定位彈出窗口而無需用CSS樣式手動執行此操作？

WORKING DEMO

Answer 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在你的小提琴和檢查出來...

Answer 2

我把jme11的答案的概念，更新的引導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_obj.setContent($('<div/>').text('hello world')); 

Answer 3

我剛打電話

button.popover('show');

然後將其重新定位它。

Answer 4

如果彈出窗口的位置是「top」（如問題所示），則可以從頁面頂部調整其絕對位置。

我創建了一個函數來計算彈出窗口的高度，然後在頁面上移動它的高度。

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

Answer 5

我用這個代碼調整高度關酥料餅的時候，它已經加載到頁面：

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

變量發件人是popover居中的目標。

Answer 6

我有一個類似的情況，我有一個已經包含一些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) }); 

Answer 7

使用引導V3.3。7：

您可以擴展Popover構造函數以添加對重新定位函數的支持。您可以將此腳本放置在加載引導程序的位置下方。

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> 

然後在你的腳本，當您需要插入的內容後重新定位你的提示。你可以叫：

$element.popover('reposition')