वाम पोजिशनिंग एक बूटस्ट्रैप पॉपओवर

Question

मैं एक पॉपओवर कि एक लेबल के बाईं ओर दिखाई देता है है:

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

पॉपओवर वर्तमान में एक रेडियो बटन ब्लॉक कर रहा है और मैं इसे छोड़ दिया है, कहते हैं, 10px ले जाना चाहते हैं। मैं यह समझने के लिए प्रतीत नहीं कर सकता कि यह कैसे करें। ऑफसेट कुछ भी नहीं करता है (अगर मैं 10 या 10000 जोड़ता हूं तो इससे कोई फर्क नहीं पड़ता)। यहाँ ऐसे ही एक लेबल के लिए HTML है:

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

मैं की तरह कुछ के साथ सीएसएस में वर्ग अधिभावी द्वारा पॉपओवर स्थिति निर्धारित करने की कोशिश कर सकते हैं:

.popover { 
    left: 380px !important; 
} 

लेकिन के रूप में यह प्रतीत होता है इस आदर्श से दूर है विभिन्न ब्राउज़रों का उपयोग कर विभिन्न स्थानों में।

वहाँ

एक छोटे से सही मार्जिन जोड़ने का एक तरीका होना चाहिए, हाँ?

धन्यवाद।

Answer 1

ऐसा लगता है कि एक एकल पॉपओवर शैली बनाना असंभव लगता है, और - जैसा कि सारा का उल्लेख है - offset (आप qtip के बारे में सोच सकते हैं?) के रूप में ऐसा कोई विकल्प नहीं है। हालांकि, आप tooltip विकल्पों से "व्युत्पन्न" अनियंत्रित विकल्प template का उपयोग कर सकते हैं (वास्तव में, पॉपओवर केवल content प्रस्तुत करता है)।

template संशोधित करके आप अलग-अलग प्रत्येक पॉपओवर को शैलीबद्ध कर सकते हैं! मुझे ऐसा लगता है आपकी समस्या arrow पॉपओवर से भी ज्यादा है, तो आप, बीच में से, केवल टेम्पलेट के लिए तीर के लिए एक शैली जोड़कर ऊपर या नीचे तीर ले जाने के लिए इस

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

की तरह कोशिश कर सकते हैं बेशक, यहां सभी लेबलों के लिए सेट किए गए सभी पॉपओवर के लिए तीर $('label').hover के कारण संशोधित किए जाएंगे, लेकिन यदि आप चाहते हैं तो पॉपओवर को अलग-अलग सीएसएस के बिना स्टाइल किया जा सकता है, बिना रेडियो बटन वाले लोगों को इसकी आवश्यकता नहीं हो सकती है।

अद्यतन - शैली पूरी पॉपओवर + 10px छोड़ दिया

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

सही मार्जिन जोड़ने के लिए इस प्रयास करें करने के लिए:

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

Answer 3

आप डेटा-प्लेसमेंट जोड़ सकते हैं = तत्व को 'छोड़' ।