Positioning popover with twitter bootstrap

Question

if I have a popover on the <a> element and call it like this

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

popover displays the top of the element, how can I make popover display the top right or top left element?

Answer 1

You can add popover to the styles of the standard layout to move the popover wherever 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

At the moment you cannot, at the moment you are limited top | bottom | left | right top | bottom | left | right top | bottom | left | right , for such accuracy you can change the display of another plugin, for example the tipsy jQuery plugin, which was the basis for the tooltip plugin for bootstrapping.

Bootdtrap Popover Documentation .

Answer 3

Use left instead of margin-left. Boot popover uses absolute position. Say .popover {left: 15px;}