बूटस्ट्रैप पॉपओवर प्लगइन
पॉपओवर प्लगइन
पॉपओवर प्लगइन टूलटिप्स के समान है; यह एक पॉप-अप बॉक्स है जो तब प्रकट होता है जब उपयोगकर्ता किसी तत्व पर क्लिक करता है। अंतर यह है कि पॉपओवर में बहुत अधिक सामग्री हो सकती है।
युक्ति: प्लगइन्स को व्यक्तिगत रूप से शामिल किया जा सकता है (बूटस्ट्रैप की व्यक्तिगत "popover.js" फ़ाइल का उपयोग करके), या सभी को एक साथ ("bootstrap.js" या "bootstrap.min.js" का उपयोग करके) शामिल किया जा सकता है।
एक पॉपओवर कैसे बनाएं
पॉपओवर बनाने के लिए, 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>
पूर्ण बूटस्ट्रैप पॉपओवर संदर्भ
सभी पॉपओवर विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस पॉपओवर संदर्भ पर जाएं ।