बूस्ट्रैप 5 पॉपअप

पॉपअप

पॉपअप (Popover) कंपोनेंट टूलटिप के समान है; यह एक पॉपअप है जो उपयोगकर्ता ने एलीमेंट पर क्लिक किया हो तब दिखाई देता है। अलग बात यह है कि पॉपअप में अधिक सामग्री रखी जा सकती है。

कैसे पॉपअप बनाएं

पॉपअप बनाने के लिए data-bs-toggle="popover" प्रकृति एलीमेंट में जोड़ता है。

कृपया title प्रकृति निर्धारित करता है कि पॉपअप का शीर्षक टैक्स्ट और इसे data-bs-content प्रकृति निर्धारित करता है कि पॉपअप में कौनसा टैक्स्ट दिखाया जाएगा:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="पॉपअप शीर्षक" data-bs-content="पॉपअप के अंदर कुछ सामग्री">पॉपअप टॉगल</button>

ध्यान:पॉपअप काम करने के लिए JavaScript से आरंभ करना आवश्यक है。

निम्नलिखित कोड दस्तावेज़ में सभी पॉपअप को सक्षम करेगा:

उदाहरण

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

स्वयं प्रयोग कीजिए

पॉपअप स्थानीयकरण

मूलभूत रूप से, पॉपअप एलीमेंट के दायां ओर दिखाई देता है。

कृपया data-bs-placement प्रकृति सेटिंग पॉपअप फ़ेल्कस एलीमेंट के ऊपरी, निचले, बाईं या दायां ओर के स्थान:

उदाहरण

<a href="#" title="शीर्षक" data-bs-toggle="popover" data-bs-placement="top" data-content="सामग्री">टॉप</a>
<a href="#" title="शीर्षक" data-bs-toggle="popover" data-bs-placement="bottom" data-content="सामग्री">बोटम</a>
<a href="#" title="हेडर" data-bs-toggle="popover" data-bs-placement="left" data-content="कंटेंट">बाईं</a>
<a href="#" title="हेडर" data-bs-toggle="popover" data-bs-placement="right" data-content="कंटेंट">दायाँ</a>

स्वयं प्रयोग कीजिए

ध्यान:अगर विस्तार की पर्याप्त जगह नहीं होती, तो placement गुण आपकी अपेक्षाओं के अनुसार काम नहीं करेगा।उदाहरण के लिए: अगर आप पृष्ठ के शीर्ष पर (कोई आरक्षित जगह नहीं) top placement गुण का उपयोग करते हैं, तो यह एलिमेंट के नीचे या दायाँ (किसी भी जगह) प्रदर्शित होगा。

पूर्वागामी बंद करना

डिफ़ॉल्ट में, एलिमेंट पर फिर से क्लिक करने पर पूर्वागामी बंद होगी।बजाय इसके, आप इस्तेमाल कर सकते हैं data-bs-trigger="focus" गुण, इस गुण को सेट करके एलिमेंट के बाहर क्लिक करने पर पूर्वागामी बंद कर सकते हैं:

उदाहरण

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="कागजाति के किसी भी स्थान पर क्लिक करके यह पूर्वागामी बंद कर सकते हैं">क्लिक करें</a>

स्वयं प्रयोग कीजिए

होवर पूर्वागामी

सूचना:यदि आप चाहते हैं कि आपका माउस पॉइंटर एलिमेंट पर ले जाए जाने पर पूर्वागामी दिखाई दें, तो इसमें बदले वाला मान इस्तेमाल करें "hover" का data-bs-trigger गुण:

उदाहरण

<a href="#" title="हेडर" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="पूर्वागामी टेक्स्ट">मेरे ऊपर स्थिति में रखेर</a>

स्वयं प्रयोग कीजिए