बूटस्ट्रैप पॉपओवर तीर और बॉक्स पोजीशनिंग

Question

मैं बूट पर क्लिक करने से पहले, होवर पर एक लिंक के बारे में जानकारी प्रदर्शित करने के लिए बूटस्ट्रैप पॉपओवर का उपयोग कर रहा हूं। यह फिलहाल इस समय काम कर रहा है, हालांकि, लिंक पृष्ठ के शीर्ष पर एक ड्रॉपडाउन मेनू से प्रदर्शित होते हैं। जब पहले लिंक में इसके बारे में बहुत सारी जानकारी होती है, तो पॉपओवर का शीर्ष पृष्ठ के शीर्ष पर गायब हो जाता है, इसलिए आप इसकी सामग्री नहीं देख सकते हैं। मैं इसे बनाने की कोशिश कर रहा हूं ताकि पॉपओवर तीर पॉपओवर के ऊपरी-बाईं ओर दिखाई दे (जैसा कि मध्य-बाएं के विपरीत है जो अब कर रहा है) और पॉपओवर बॉक्स का शीर्ष तीर के साथ स्तर है यदि यह समझ में आता है।

$('.popOver').popover({ 
    trigger: 'hover', 
    html: true 
}); 

यह उपरोक्त काम कर रहा है लेकिन मुझे विश्वास नहीं है कि कोई भी पॉपओवर विकल्प मेरी मदद करने में सक्षम हैं। इसका सीएसएस मुझे बदलने की जरूरत है, लेकिन इसके बजाय पोस्ट करने के लिए व्यापक है, इसलिए मैं बस सही दिशा में इंगित करने के लिए बूटस्ट्रैप के ज्ञान के साथ किसी को ढूंढ रहा था।
धन्यवाद।

Answer 1

पॉपओवर दिखाए जाने के बाद आप पॉपवर या उसके तीर के प्लेसमेंट को कस्टमाइज़ कर सकते हैं .popover सीएसएस।

उदाहरण के लिए, इस नीचे 22 पिक्सल पॉपओवर के शीर्ष ..

$('[data-toggle=popover]').on('shown.bs.popover', function() { 
    $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px') 
}) 

कार्य डेमो धक्का: http://bootply.com/88325

Answer 2

यह तीर उर सही स्थिति प्रदान करेगा

$(el).on('shown.bs.popover', function() { 
    var position = parseInt($('.popover').position().top); 
    var pos2 = parseInt($(el).position().top) - 5; 
    var x = pos2 - position + 5; 
    if (popoverheight < x) 
    x = popoverheight; 
    $('.popover.left .arrow').css('top', x + 'px'); 
    }); 

Answer 3

एम y उपयोग केस यह है कि पॉपओवर प्लेसमेंट top है और मुझे तीर को हटाना है।

मैंने बूटस्ट्रैप 3.2.0 का उपयोग करते समय @Skelly द्वारा प्रदान किए गए समाधान का पालन किया। एक समस्या यह है कि सीएसएस संपत्ति top के रूप में पॉपओवर फ़्लैश shown.bs.popover में अपडेट किया गया है।

वास्तव में, आप जब पॉपओवर आरंभ template संपत्ति को ओवरराइड और कुछ margin-top (margin-left नियुक्ति छोड़ दिया है, तो/सही) यह करने के लिए जोड़ सकते हैं।

$('[data-toggle=popover]').popover({ 
    placement: 'top', 
    template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' 
}); 

डेमो: http://www.bootply.com/gWwmO5XdbL

Answer 4

मैं shown.bs.popover घटना नियुक्ति विधि के बजाय का उपयोग करना चाहिये। यह तत्व दिखाए जाने पर पॉपअप कूद को ट्रिगर नहीं करेगा।

$('[data-toggle=popover]').popover({ 
    placement: function(context, source) { 
    var self = this; 
    setTimeout(function() { 
     self.$arrow.css('top', 55); 
     self.$tip.css('top', -45); 
    }, 0); 
    return 'right'; 
    }, 
}); 

Answer 5

मैं पॉपओवर ऊपर जा रहा के साथ मुद्दों कर रहा था तो मैं यह नहीं देख सकता था:

यह यह कैसे काम करता है। यह मेरे लिए यह तय किया गया है

// Move things around if the popover is clipped on top. 
if (parseInt($('.popover').position().top) < 10) { 
    var arrow_position = parseInt($(this).position().top); 
    $('.popover').css('top', 10 + 'px'); 
    $('.popover .arrow').css('top', arrow_position + 'px'); 
}