Bootstrap v3.3.5 弹出框放置答案

【问题标题】：Bootstrap v3.3.5 popover placementBootstrap v3.3.5 弹出框放置
【发布时间】：2015-06-23 21:50:32
【问题描述】：

我很难使用新的引导弹出框。我认为这可能是一个错误，但我不完全确定。

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

基本上，我正在尝试使用弹出框在表单中显示错误消息。当我尝试将弹出框添加到 不在屏幕上 的元素时，弹出框无法正确对齐。奇怪的是，它只发生在我使用 right 或 left 放置时。如果我将弹出框的位置设置为顶部、底部或自动，那么它就可以正常工作（示例中对此进行了说明）。

目标这个例子展示了我正在尝试做的事情。 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');

});

【问题讨论】：

标签： jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我可以通过将视口设置为 false 来使其工作，以便它覆盖默认值并使用容器选项作为弹出框。感觉有点骇人听闻，因为我宁愿不更改每个弹出窗口的设置。 IE 容器 = 假 |字符串 |功能支持。

如果有人有更好的解决方案，我会全力以赴。

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

});

【讨论】：