sinistro Posizionamento A Bootstrap Popover

Question

Ho un popover che appare alla sinistra di un'etichetta:

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

Il popover sta attualmente bloccando un pulsante di opzione e voglio spostarlo a sinistra, per esempio, 10px. Non riesco a capire come farlo. l'offset sembra non fare nulla (se aggiungo 10 o 10000 non fa differenza). Ecco il codice HTML per una tale etichetta:

<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> 

posso cerco di impostare la posizione popover sovrascrivendo la classe in CSS con qualcosa di simile:

.popover { 
    left: 380px !important; 
} 

ma questo è ben lungi dall'essere ideale come appare in diversi punti utilizzando diversi browser.

Lì deve essere un modo per aggiungere un piccolo margine destro, sì?

Grazie.

Answer 1

Sembra piuttosto impossibile stilare un singolo popover e, come dice Sara, non esiste un'opzione come offset (si potrebbe pensare a qtip?). Tuttavia, è possibile utilizzare l'opzione non documentata template, "derivata" dalle opzioni tooltip (infatti, il popover introduce solo content).

Modificando template è possibile personalizzare individualmente ogni popover! Mi sembra il problema è più che il popover sé la arrow, in modo da poter provare a spostare la freccia verso l'alto o verso il basso a partire dalla metà, semplicemente aggiungendo uno stile per freccia al modello, come questo

$('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'); 
}); 

naturalmente, qui le frecce per tutti i popover impostati per tutte le etichette verranno modificate a causa dello $('label').hover, ma i popover possono essere personalizzati singolarmente senza CSS, se lo si desidera, quelli senza i pulsanti di opzione potrebbero non essere necessari.

UPDATE - stile tutto popover + 10px a sinistra il

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

Answer 2

Prova questo per aggiungere il margine destro:

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

Answer 3

È possibile aggiungere dati-placement = 'left' all'elemento .