Links Positionierung A Bootstrap Popover

Question

Ich habe einen popover, die links von einem Label erscheint:

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

Der popover derzeit ein Optionsfeld blockiert und ich möchte es nach links bewegen, sagt sie, 10px. Ich kann mir nicht vorstellen, wie ich das machen soll. Offset scheint überhaupt nichts zu tun (Wenn ich 10 oder 10000 addiere, macht das keinen Unterschied). Hier ist der HTML-Code für ein solches 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> 

kann ich versuchen, die popover Position zu setzen, indem das Überschreiben der Klasse in CSS mit so etwas wie:

.popover { 
    left: 380px !important; 
} 

aber das ist bei weitem nicht ideal, wie es scheint an verschiedenen Stellen mit verschiedenen Browsern.

Dort muss eine Möglichkeit sein, einen kleinen rechten Rand hinzuzufügen, ja?

Danke.

Answer 1

Es scheint ziemlich unmöglich zu sein, ein einzelnes Popover zu stylen, und - wie Sara erwähnt - gibt es keine solche Option wie offset (Sie können an qtip denken?). Sie können jedoch die undokumentierte Option template verwenden, die von den Optionen tooltip "abgeleitet" ist (tatsächlich führt Popover nur content ein).

Durch die Änderung template können Sie jeden Popover individuell gestalten! Es scheint mir, Ihr Problem der arrow mehr als die popover selbst ist, so können Sie versuchen, auf den Pfeil nach oben oder unten von der Mitte zu bewegen, indem Sie einfach einen Stil für Pfeil auf der Schablone hinzufügen, wie diese

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

Natürlich werden hier die Pfeile für alle für alle Labels gesetzten Popovers aufgrund der $('label').hover geändert, aber Popover können individuell ohne CSS gestylt werden, wenn Sie möchten, müssen diejenigen ohne Radio-Buttons möglicherweise nicht.

UPDATE - Stil die ganze popover + 10px nach links

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

die Sie interessieren den rechten Rand hinzuzufügen:

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

Answer 3

Sie können Daten-Platzierung hinzufügen = 'links' auf das Element .