मेरे पास बूटस्ट्रैप 4 के दस्तावेज़ीकरण से बटन है:

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

और इसके नीचे एक विधि:

$(function () {
  $('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'click',
  })
})

एचटीएमएल का निरीक्षण करते समय, मैं देख सकता हूं कि एक नया डिव दिखाया गया है <div class="popover fade top in".. जो दिखाई नहीं देता। तत्व का निरीक्षण करते समय, इसमें एक वर्ग होता है जो इसे छुपाता है:

.fade:not(.show){
  opacity: 0;
}

इसे खोलना, पॉपओवर को इच्छित के रूप में दिखाता है। कोई सुराग, मैं क्या गलत कर रहा हूँ?

1
Dannz 28 अक्टूबर 2019, 13:00

1 उत्तर

सबसे बढ़िया उत्तर

समस्या उन वर्गों के चयन के साथ है जो पॉपओवर पर हैं। जैसा कि आपने सही कहा .fade:not(.show) शुरू हो गया है लेकिन आपकी कक्षाएं <div class="popover fade top in".. हैं। तो समस्या यह है कि यह .show के बजाय .in का उपयोग करता है। इसलिए मुझे लगता है कि कहीं न कहीं एक संस्करण अंतर है, क्योंकि मुझे लगता है कि बूटस्ट्रैप 3 में पॉपओवर in हुआ करते थे जबकि बूटस्ट्रैप 4 show का उपयोग करते हैं।

क्या आप इसे बूटस्ट्रैप ईवेंट का उपयोग करके मैन्युअल रूप से कहीं सेट कर रहे हैं? या हो सकता है कि आपने बूटस्ट्रैप.जेएस का गलत संस्करण आयात किया हो?

3
denns 28 अक्टूबर 2019, 10:25