Tooltip/Popover misplacement

[RonnieDilli]

Bootstrap '3.2.0' introduced: Tooltip-Balloon & PopOver-Arrow misplacement.

Steps to reproduce Bug:

1. Access: http://jsfiddle.net/f6hMD/17/ (which is running Bootstrap 3.2.0);
2. Make the 'Result Window' big enough for the menu not to collapse automatically;
3. Notice the misplacements:

• Popover Arrow is misplaced, displayed in the center of the Balloon, instead of on top;
  
• Inside de menu the tooltips are set 'auto left', and even though there isn't space enough in the right side it tries to place it to the right.
  

Ps.: '3.1.1' was working fine as you can see by just switching the CSS and JS file links to '3.1.1':
Same example: http://jsfiddle.net/JX4aL/

[cvrebert]

I think your .nav.navbar-nav.navbar-right needs to be within either the .navbar-header or a .navbar-collapse.
Likewise, I don't think your .navbar-right.popover-auto-hide can be a direct child of the .navbar.

[RonnieDilli]

I did as you suggested, but even so they are misplaced:

BootStrap 3.2.0: http://jsfiddle.net/f6hMD/17/
BootStrap 3.1.1: http://jsfiddle.net/JX4aL/

[cvrebert]

Now you have 2 .navbar-right siblings, and they're both children of a .navbar-right. Pretty sure that's overkill.

[cvrebert]

I suspect that the popover arrow misplacement problem is the same as #13696.

[Zenuka]

I also had issues with the popover arrow placement and made this example: http://jsfiddle.net/Zenuka/Tj5LS/3/
Try content1 and content2 and see the layout issues.

[HorizonXP]

I'd like to also chime in here. I noticed the behaviour change when updating from 3.1 to 3.2. For now, I've dropped back to 3.1, but if someone can either point out what I'm doing wrong, or possibly fix the issue in 3.2 (if it's an actual issue), I'd appreciate it!

Example with 3.2 showing incorrect behaviour: http://jsbin.com/geqiwixu/52
Example with 3.1 showing correct behaviour: http://jsbin.com/geqiwixu/53

In the above examples, the popover should appear on the right side of the circle. With Bootstrap 3.1, this is what happens. With Bootstrap 3.2, the orientation is correct, but it's positioned in the top-left corner of the circle, which is incorrect.

[cvrebert]

@HorizonXP That's a separate SVG issue that should be fixed by #14015 in master.

[HorizonXP]

@cvrebert It appears you are correct. I just built Bootstrap from source, and things work as expected. Looking forward to 3.2.1 then!

[hnrch02]

@RonnieDilli @Zenuka Have you guys tried to reproduce using the patch from #13718?

[throrin19]

+1 for the 3.2.1 version. I have the same problem with path elements on SVG. in 3.1 they have correct position, but on 3.2.0 their position is on 0,0 of the path element :

Correct position (3.1)

Wrong position (3.2.0) :

To set the correct position, i test if DOM eelement has the method getBoundingClientRect and i position the popover correctly on the shown.bs.popover

[cvrebert]

Regarding the auto left bug, see #14561.