Bootstrap v3.3.5 popover placement

Question

I'm having a hard time using the new bootstrap popovers. I think it might be a bug, but I'm not completely sure.

Here is my example. http://jsbin.com/vohariwuja/edit?html,js,output

Basically I'm trying to use popovers to display error messages in a form. When I try to add a popover to an element that is not on the screen , the popover doesn't align properly. The strange thing about it is, it only happens when i use right or left placement. If I set the placement of the popover to top, bottom, or auto then it works just fine (this is noted in the example).

Goal This example shows what I'm trying to do. http://jsfiddle.net/1ejmvg1v/ It is using version 3.1.1. Scroll down, click 'Test' button, scroll up, and the popover is correctly placed.

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

I was able to make it work by setting viewport to false so that it overrides the default value and using the container option for the popover. It feels a little hackish in that I would have preferred to not alter the settings for each popover. IE container = false | string | function support.

If anyone has a better solution I'm all ears.

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

});