Bootstrap 3.2 popover not positioned properly when moving target element
As the title says, I am having trouble loading the Popuppost to properly position the location where the target is placed. Demo Bootply:
The bottom line is I am trying to create a top nav bar where one of the rightmost elements shows a popover when clicked. As you can see in the demo, the popover appears in the appropriate place, but the arrow is a smack-dab in the middle of the popover window, not at the top where it should be.
If float: right; the instruction is removed from the .wrapper element, then the caption appears.
I messed up the content in the popover itself to see if it affected things, but it looks like it doesn't. For example, setting html: true or html: false makes no difference. The presence or absence of HTML content in the popover doesn't seem to make any difference.
Also, placing the target in the Bootstrap HTML structure (container> strings> col-xs- * etc) doesn't solve the problem. In fact, I started with a target within that hierarchy, saw an error, and then removed the anchor from the said hierarchy in the hopes that this was just some CSS clash I had to overcome. Alas, this does not seem to be the case.
I hope this is stupid of me. Any help is appreciated!
source to share