As the title says, I'm having issues getting a Bootstrap popover to position properly where the target element is floated. Bootply demo here:

<http://www.bootply.com/xqA2bb2mkJ>

The gist is that I'm trying to create a top navbar where one of the right-most elements, when clicked, shows a popover. As you can see in the demo, the popover appears in the appropriate spot, but the arrow is smack-dab in the middle of the popover window, rather than at the top where it's supposed to be.

If the float:right; instruction is removed from the .wrapper element, then the popover appears properly.

I've messed around with the content in the popover itself, to see if that affected things, but it does not appear to do so. For example, setting html: true or html: false doesn't matter. The presence or absence of HTML content in the popover does not seem to make a difference either. 

Furthermore, putting the target element within the Bootstrap HTML framework (container > row > col-xs-\*, etc) does not solve the problem. In fact, I started out with the target within that hierarchy, saw the bug, then removed the anchor from said hierarchy in the hopes that this was just some CSS collision that I had to pick through. Alas, that does not seem to be the case.

Hopefully this is something stupid on my part. Any help is appreciated!