बूटस्ट्रैप 4 पॉपओवर
बूटस्ट्रैप 4 पॉपओवर
पॉपओवर घटक टूलटिप्स के समान है; यह एक पॉप-अप बॉक्स है जो तब प्रकट होता है जब उपयोगकर्ता किसी तत्व पर क्लिक करता है। अंतर यह है कि पॉपओवर में बहुत अधिक सामग्री हो सकती है।
पॉपओवर टॉगल करेंपॉपओवर कैसे बनाएं
पॉपओवर बनाने के लिए, data-toggle="popover"
किसी तत्व में विशेषता जोड़ें।
titleपॉपओवर के हेडर टेक्स्ट को निर्दिष्ट करने के लिए विशेषता का उपयोग करें, और उस data-contentटेक्स्ट को निर्दिष्ट करने के लिए विशेषता का उपयोग करें जिसे पॉपओवर के शरीर के अंदर प्रदर्शित किया जाना चाहिए:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
नोट: पॉपओवर को jQuery के साथ प्रारंभ किया जाना चाहिए: निर्दिष्ट तत्व का चयन करें और popover()विधि को कॉल करें।
निम्नलिखित कोड दस्तावेज़ में सभी पॉपओवर को सक्षम करेगा:
उदाहरण
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
पोजिशनिंग पॉपओवर
डिफ़ॉल्ट रूप से, पॉपओवर तत्व के दाईं ओर दिखाई देगा।
data-placementतत्व के ऊपर, नीचे, बाएँ या दाएँ पक्ष पर पॉपओवर की स्थिति निर्धारित करने के लिए विशेषता का उपयोग करें :
उदाहरण
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
नोट: प्लेसमेंट विशेषताएँ आपकी अपेक्षा के अनुरूप काम नहीं करती हैं यदि यह उनके लिए पर्याप्त जगह नहीं है। उदाहरण के लिए: यदि आप किसी पृष्ठ के शीर्ष पर शीर्ष प्लेसमेंट का उपयोग करते हैं (जहां इसके लिए कोई जगह नहीं है), तो यह इसके बजाय तत्व के नीचे या दाईं ओर (जहां भी इसके लिए जगह है) पॉपओवर प्रदर्शित करेगा।
क्लोजिंग पॉपओवर
डिफ़ॉल्ट रूप से, जब आप तत्व पर दोबारा क्लिक करते हैं तो पॉपओवर बंद हो जाता है। हालाँकि, आप उस data-trigger="focus"विशेषता का उपयोग कर सकते हैं जो तत्व के बाहर क्लिक करने पर पॉपओवर को बंद कर देगी:
उदाहरण
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
युक्ति: यदि आप चाहते हैं कि माउस पॉइंटर को तत्व पर ले जाने पर पॉपओवर प्रदर्शित हो, तो data-trigger"होवर" के मान के साथ विशेषता का उपयोग करें:
उदाहरण
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
पूर्ण बूटस्ट्रैप पॉपओवर संदर्भ
सभी पॉपओवर विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस पॉपओवर संदर्भ पर जाएं ।