Left-Positioning A Bootstrap Popover

Question

I have a popover that appears to the left of a label:

 $('label').hover(function () {
                $(this).popover({
                    offset: 10,
                    placement: 'left'
                }).popover('show');

The popover is currently blocking a radio button and I want to move it left, say, 10px. I can't seem to figure out how to do this. offset seems to do nothing at all (If I add 10 or 10000 it doesn't make a difference). Here is the HTML for one such label:

 <label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label> 

I can try to set the popover position by overriding the class in CSS with something like:

.popover {
    left: 380px !important;
}

but this is far from ideal as it appears in different spots using different browsers.

There must be a way of adding a small right margin, yes?

Thanks.

Answer 1

It seems rather impossible to style a single popover, and - as Sara mention - there is no such option as offset (you may think of qtip?). However, you can use the undocumented option template, "derived" from the tooltip options (in fact, popover only introduces content).

By modifying template you can individually style each popover! It seems to me your problem is the arrow more than the popover itself, so you can try to move the arrow up or down from the middle, simply by adding a style for arrow to the template, like this

$('label').hover(function() {
    $(this).popover({
        placement: 'left',
        template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    }).popover('show');
});

of course, here the arrows for all popovers set for all labels will be modified due to the $('label').hover, but popovers can be styled individually without CSS if you want, those without radio buttons may not need to.

UPDATE - style the whole popover +10px to the left

...
 template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
...