v3.3.5 popover placement

[bassxzero]

In case I leave something out, I also posted this on stackoverflow. http://stackoverflow.com/questions/31014152/bootstrap-v3-3-5-popover-placement

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).

Here is a JSBin http://jsbin.com/vohariwuja/edit?html,js,output

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

[twbs-lmvtfy]

Hi @bassxzero!

You appear to have posted a live example (http://fiddle.jshell.net/1ejmvg1v/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 23, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.1.1

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[bassxzero]

This is my first time posting so I'm not sure how all this works. With that said, here is an updated fiddle.
Version 3.1.1 was in the original post to show what is the newest version I know of that worked. The only reason I'm adding this fiddle is that I'm not sure anyone will see this issue if it is flagged as Incorrect markup or version.

https://jsfiddle.net/9r6bwhov/

[twbs-lmvtfy]

Hi @bassxzero!

You appear to have posted a live example (https://fiddle.jshell.net/4t8d6e5d/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 23, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.1.1

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[bassxzero]

https://jsfiddle.net/9r6bwhov/

[kkirsche]

I wasn't able to notice any difference between the two JS examples posted in the last JSFiddle @bassxzero on Chrome 43.0.2357.81 with OS X 10.10.3

[byoungb]

I am having the same issue.

http://jsfiddle.net/vcr9J/468/

[twbs-lmvtfy]

Hi @jitendersandhu!

You appear to have posted a live example (http://run.plnkr.co/plunks/0cX5jxlM976DP8adNlzU/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 1, column 16 thru line 2, column 22: Attribute ng-app not allowed on element html at this point.
• line 13, column 1 thru column 32: Attribute ng-controller not allowed on element div at this point.
• line 15, column 5 thru column 37: Attribute uib-collapse not allowed on element div at this point.
• line 21, column 5 thru line 24, column 46: Attribute uib-tooltip not allowed on element button at this point.
• line 21, column 5 thru line 24, column 46: Attribute tooltip-placement not allowed on element button at this point.
• line 21, column 5 thru line 24, column 46: Attribute ng-click not allowed on element button at this point.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[twbs-lmvtfy]

Hi @jitendersandhu!

You appear to have posted a live example (http://fiddle.jshell.net/4urkkgnj/7/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 69, column 1 thru column 23: Attribute ng-app not allowed on element body at this point.
• line 70, column 3 thru column 50: Attribute ng-controller not allowed on element div at this point.
• line 72, column 7 thru column 33: Attribute ng-show not allowed on element div at this point.
• line 78, column 7 thru line 81, column 48: Attribute uib-tooltip not allowed on element button at this point.
• line 78, column 7 thru line 81, column 48: Attribute tooltip-placement not allowed on element button at this point.
• line 78, column 7 thru line 81, column 48: Attribute ng-click not allowed on element button at this point.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team