Bootstrap v3.3.5 popover placement

Question

我很難使用新的bootstrap彈出窗口。我認爲這可能是一個錯誤，但我不完全確定。

這是我的例子。 http://jsbin.com/vohariwuja/edit?html,js,output

基本上我試圖使用彈出窗口來顯示窗體中的錯誤消息。當我嘗試向不在屏幕上的元素添加彈出窗口時，彈出窗口未正確對齊。奇怪的是，它只發生在我使用正確或左安置。如果我將popover的位置設置爲top，bottom或auto，那麼它就可以正常工作（這在示例中有所說明）。

目標 這個例子顯示了我想要做的。 http://jsfiddle.net/1ejmvg1v/ 它使用的是版本3.1.1。向下滾動，點擊「測試」按鈕，向上滾動，彈出窗口被正確放置。

HTML

<div class="form-group col-xs-4 ErrorDiv has-feedback " style="margin: 0px; padding: 0px;" rel="popover"> 
    <input class="form-control" name="Input1" id="Input1" value="" type="text">  
    </div> 

    <div class="form-group col-xs-4 ErrorDiv has-feedback " style="margin: 0px; padding: 0px;" rel="popover"> 
    <input class="form-control" name="Input2" id="Input2" value="" type="text">  
    </div> 

的Javascript

var PopoverOptions = { 
    html: true , 
    placement: 'right', 
    /* This one works 
    placement: 'bottom', 
    */ 
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content ErrorContentDiv"></div></div>', 
    title: '<button class="close" type="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>', 
    trigger: 'manual', 
    content: function() 
    { 
    var _element = $(this); 
    if((_element.attr('data-error-message') !== undefined) && (_element.attr('data-error-message') !== null) && ($.trim(_element.attr('data-error-message')).length > 0)) 
    { 
     return _element.attr('data-error-message'); 
    } 
    else 
     return ""; 
    } 
}; 



$.each($('.ErrorDiv'),function(){ 

    $(this).attr('data-error-message','This is a error message') 
    .popover(PopoverOptions) 
    .popover('show'); 

}); 

Answer 1

我能夠讓它通過，使其覆蓋默認值設置視口爲false，並使用用於酥料餅的容器的選擇工作。這感覺有點駭人聽聞，因爲我寧願不改變每個popover的設置。 I.E容器= false |字符串|功能支持。

如果有人有一個更好的解決方案，我全部耳朵。

的JavaScript

var PopoverOptions = { 
    html: true , 
    placement: 'right', 
    /* This one works 
    placement: 'bottom', 
    */ 
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content ErrorContentDiv"></div></div>', 
    title: '<button class="close" type="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>', 
    trigger: 'manual', 
    content: function() 
    { 
    var _element = $(this); 
    if((_element.attr('data-error-message') !== undefined) && (_element.attr('data-error-message') !== null) && ($.trim(_element.attr('data-error-message')).length > 0)) 
    { 
     return _element.attr('data-error-message'); 
    } 
    else 
     return ""; 
    }, 
    viewport: false 
}; 



$.each($('.ErrorDiv'),function(){ 

    var _ErrorDiv = $(this); 
    var _temp = $.extend({}, PopoverOptions,{container: _ErrorDiv}); 
    $(this).attr('data-error-message','This is a error message') 
    .popover(_temp) 
    .popover('show'); 

});