Question

我很难使用新的bootstrap popovers。我认为这可能是一个错误，但我不完全确定。

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

基本上我正在尝试使用popovers来显示表单中的错误消息。当我尝试将弹出窗口添加到不在屏幕上的元素时，弹出窗口未正确对齐。奇怪的是，只有在我使用正确或左展示位置时才会发生这种情况。如果我将弹出窗口的位置设置为顶部，底部或自动，那么它可以正常工作（这在示例中说明）。

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

我能够通过将viewport设置为false来使其工作，以便它覆盖默认值并使用弹出窗口的容器选项。感觉有点hackish我宁愿不改变每个popover的设置。 I.E container = 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');

});

Bootstrap v3.3.5 popover放置

1 个答案: