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.

Solution 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>'
...

Solution 2

Try this to add the right margin:

.popover.left{
  left: calc(100% - 10px) !important;
}

Solution 3

You can add data-placement='left' to the element.

Comments

[Peter]

Hi David. Thanks for your comment, I really appreciate it. I tried your suggestion, but that puts the arrow in the middle of two radio buttons, which isn't ideal (I have like 20 radio buttons stacked vertically on the page). I really need to push the entire popover + arrow like 5/10 px to the left of the label (exposing the radio button that the arrow is hiding). any other ideas?

[davidkonrad]

Yes, see the update. When the arrow behave like that, it suggests you have styled something for the popover, or the popovers are not ass tall as they become, if i copy/paste your HTML. My test was based on a clean / "fresh" TB.

[Peter]

Thanks David! That's perfect. I did what you suggested, but was trying margin-right. Thanks again!