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

});