positioning a popover using twitter bootstrap

Question

if I have a popover on an <a> element and call it as follows

$(function () {
    $('#element').popover({
        placement:'top',
        title:'some title',
        content: $('#some-div').html()
    });
});

the popover displays top center of the element, how do I get the popover to display top-right or top left of the element?

Answer 1

You can add to the styles of the standard popover layout to move the popover where you want. Here is the standard popover layout taken directly from bootstrap-popover.js:

<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>

Therefore to move it say 15px to the right you can add the following to your style:

.popover {margin-left: 15px;}

Answer 2

As of now, you can't, you're limited to top | bottom | left | right for the moment, for such precision you can modify the display of another plugin such as the tipsy jQuery plugin, which was the base for the bootstrap tooltip plugin to begin with.

Bootdtrap Popover Documentation.