Source

पोपोवेर्स

आपकी साइट के किसी भी तत्व में बूटस्ट्रैप पॉपओवर जोड़ने के लिए दस्तावेज़ और उदाहरण, जैसे कि iOS में पाए जाने वाले पॉपओवर।

अवलोकन

पॉपओवर प्लगइन का उपयोग करते समय जानने योग्य बातें:

पॉपओवर पोजिशनिंग के लिए तीसरे पक्ष के पुस्तकालय Popper.js पर भरोसा करते हैं । आपको बूटस्ट्रैप.जेएस से पहले popper.min.js को शामिल करना होगा या पॉपओवर के काम करने के लिए bootstrap.bundle.min.js/ bootstrap.bundle.jsजिसमें Popper.js शामिल है, का उपयोग करना होगा!
पॉपओवर को निर्भरता के रूप में टूलटिप प्लगइन की आवश्यकता होती है।
यदि आप स्रोत से हमारी जावास्क्रिप्ट बना रहे हैं, तो इसके लिएutil.js .
पॉपओवर प्रदर्शन कारणों से ऑप्ट-इन होते हैं, इसलिए आपको उन्हें स्वयं प्रारंभ करना होगा ।
शून्य-लंबाई titleऔर contentमान कभी भी पॉपओवर नहीं दिखाएंगे।
container: 'body'अधिक जटिल घटकों (जैसे हमारे इनपुट समूह, बटन समूह, आदि) में समस्याओं को प्रस्तुत करने से बचने के लिए निर्दिष्ट करें ।
छिपे हुए तत्वों पर पॉपओवर ट्रिगर करने से काम नहीं चलेगा।
के लिए पॉपओवर .disabledया disabledतत्वों को एक रैपर तत्व पर ट्रिगर किया जाना चाहिए।
जब कई पंक्तियों में लपेटने वाले एंकर से ट्रिगर किया जाता है, तो पॉपओवर एंकर की समग्र चौड़ाई के बीच केंद्रित होंगे। इस व्यवहार से बचने के लिए .text-nowrapअपने पर प्रयोग करें ।<a>
पॉपओवर को उनके संबंधित तत्वों को DOM से निकालने से पहले छिपाया जाना चाहिए।
एक छाया डोम के अंदर एक तत्व के लिए धन्यवाद पॉपओवर को ट्रिगर किया जा सकता है।

इस घटक का एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें ।

कुछ उदाहरणों के साथ पॉपओवर कैसे काम करते हैं, यह देखने के लिए पढ़ते रहें।

उदाहरण: हर जगह पॉपओवर सक्षम करें

किसी पृष्ठ पर सभी पॉपओवर प्रारंभ करने का एक तरीका यह होगा कि आप उन्हें उनकी data-toggleविशेषता के आधार पर चुनें:

$(function () {
  $('[data-toggle="popover"]').popover()
})

उदाहरण: `container`विकल्प का उपयोग करना

जब आपके पास मूल तत्व पर कुछ शैलियाँ हैं जो पॉपओवर में बाधा डालती हैं, तो आप एक कस्टम निर्दिष्ट करना चाहेंगे containerताकि पॉपओवर का HTML उस तत्व के बजाय दिखाई दे।

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

उदाहरण

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चार दिशाएं

चार विकल्प उपलब्ध हैं: ऊपर, दाएँ, नीचे और बाएँ संरेखित।

<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>

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

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

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

अगले क्लिक पर खारिज करें

focusउपयोगकर्ता के अगले क्लिक पर टॉगल एलिमेंट के अलावा किसी दूसरे एलीमेंट पर पॉपओवर को खारिज करने के लिए ट्रिगर का इस्तेमाल करें .

ख़ारिज-पर-अगले-क्लिक के लिए आवश्यक विशिष्ट मार्कअप

उचित क्रॉस-ब्राउज़र और क्रॉस-प्लेटफ़ॉर्म व्यवहार के लिए, आपको टैग का उपयोग करना चाहिए, <a>टैग का नहीं ,<button> और आपको एक tabindexविशेषता भी शामिल करनी चाहिए।

अस्वीकार्य पॉपओवर

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

अक्षम तत्व

विशेषता वाले तत्व disabledइंटरैक्टिव नहीं हैं, जिसका अर्थ है कि उपयोगकर्ता पॉपओवर (या टूलटिप) ट्रिगर करने के लिए उन्हें होवर या क्लिक नहीं कर सकते हैं। वर्कअराउंड के रूप में, आप पॉपओवर को एक रैपर से ट्रिगर करना चाहेंगे <div>या अक्षम तत्व पर <span>ओवरराइड करना चाहेंगे।pointer-events

अक्षम पॉपओवर ट्रिगर के लिए, आप यह भी पसंद कर सकते हैं data-trigger="hover"कि पॉपओवर आपके उपयोगकर्ताओं को तत्काल दृश्य प्रतिक्रिया के रूप में दिखाई दे क्योंकि वे अक्षम तत्व पर क्लिक करने की अपेक्षा नहीं कर सकते हैं।

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

प्रयोग

जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करें:

$('#example').popover(options)

पॉपओवर को कीबोर्ड और सहायक तकनीकी उपयोगकर्ताओं के लिए कारगर बनाना

कीबोर्ड उपयोगकर्ताओं को आपके पॉपओवर सक्रिय करने की अनुमति देने के लिए, आपको उन्हें केवल HTML तत्वों में जोड़ना चाहिए जो परंपरागत रूप से कीबोर्ड-फ़ोकस करने योग्य और इंटरैक्टिव (जैसे लिंक या फॉर्म नियंत्रण) हैं। यद्यपि मनमाने ढंग से HTML तत्वों (जैसे <span>s) को विशेषता जोड़कर ध्यान देने योग्य बनाया जा सकता है tabindex="0", यह कीबोर्ड उपयोगकर्ताओं के लिए गैर-संवादात्मक तत्वों पर संभावित रूप से कष्टप्रद और भ्रमित करने वाला टैब स्टॉप जोड़ देगा, और अधिकांश सहायक प्रौद्योगिकियां वर्तमान में इस स्थिति में पॉपओवर की सामग्री की घोषणा नहीं करती हैं। . इसके अतिरिक्त, केवल अपने पॉपओवर के लिए ट्रिगर के रूप में भरोसा न hoverकरें, क्योंकि इससे उन्हें कीबोर्ड उपयोगकर्ताओं के लिए ट्रिगर करना असंभव हो जाएगा।

जब आप विकल्प के साथ पॉपओवर में समृद्ध, संरचित HTML सम्मिलित कर सकते हैं html, तो हम दृढ़ता से अनुशंसा करते हैं कि आप अत्यधिक मात्रा में सामग्री जोड़ने से बचें। aria-describedbyपॉपओवर वर्तमान में जिस तरह से काम करते हैं, वह यह है कि, एक बार प्रदर्शित होने के बाद, उनकी सामग्री विशेषता के साथ ट्रिगर तत्व से जुड़ी होती है । परिणामस्वरूप, पॉपओवर की संपूर्ण सामग्री की घोषणा सहायक प्रौद्योगिकी उपयोगकर्ताओं के लिए एक लंबी, निर्बाध स्ट्रीम के रूप में की जाएगी।

इसके अतिरिक्त, जबकि आपके पॉपओवर में इंटरैक्टिव नियंत्रण (जैसे प्रपत्र तत्व या लिंक) भी शामिल करना संभव है (इन तत्वों को whiteListया अनुमत विशेषताओं और टैग में जोड़कर), ध्यान रखें कि वर्तमान में पॉपओवर कीबोर्ड फ़ोकस ऑर्डर को प्रबंधित नहीं करता है। जब कोई कीबोर्ड उपयोगकर्ता पॉपओवर खोलता है, तो ट्रिगरिंग तत्व पर ध्यान केंद्रित रहता है, और चूंकि पॉपओवर आमतौर पर दस्तावेज़ की संरचना में ट्रिगर का तुरंत पालन नहीं करता है, इस बात की कोई गारंटी नहीं है कि आगे बढ़ना/दबानाTABकीबोर्ड उपयोगकर्ता को पॉपओवर में ही ले जाएगा। संक्षेप में, बस एक पॉपओवर में इंटरैक्टिव नियंत्रण जोड़ने से इन नियंत्रणों को कीबोर्ड उपयोगकर्ताओं और सहायक तकनीकों के उपयोगकर्ताओं के लिए पहुंच से बाहर/अनुपयोगी बना दिया जा सकता है, या कम से कम एक अतार्किक समग्र फोकस ऑर्डर के लिए बना सकता है। इन मामलों में, इसके बजाय एक मोडल संवाद का उपयोग करने पर विचार करें।

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-animation=""।

ध्यान दें कि सुरक्षा कारणों से डेटा विशेषताओं का उपयोग करके sanitize, sanitizeFnऔर विकल्पों की आपूर्ति नहीं की जा सकती है।whiteList

नाम	टाइप	चूक	विवरण
एनीमेशन	बूलियन	सच	पॉपओवर के लिए CSS फ़ेड ट्रांज़िशन लागू करें
पात्र	स्ट्रिंग \| तत्व \| असत्य	असत्य	पॉपओवर को एक विशिष्ट तत्व में जोड़ता है। उदाहरण `container: 'body'`:। यह विकल्प विशेष रूप से इस मायने में उपयोगी है कि यह आपको ट्रिगरिंग तत्व के पास दस्तावेज़ के प्रवाह में पॉपओवर की स्थिति बनाने की अनुमति देता है - जो पॉपओवर को विंडो आकार बदलने के दौरान ट्रिगरिंग तत्व से दूर तैरने से रोकेगा।
विषय	स्ट्रिंग \| तत्व \| समारोह	''	डिफ़ॉल्ट सामग्री मान यदि `data-content`विशेषता मौजूद नहीं है। यदि कोई फ़ंक्शन दिया जाता है, तो इसे इसके `this`संदर्भ सेट के साथ उस तत्व पर सेट किया जाएगा जिससे पॉपओवर जुड़ा हुआ है।
देरी	संख्या \| वस्तु	0	पॉपओवर दिखाने और छिपाने में देरी (एमएस) - मैन्युअल ट्रिगर प्रकार पर लागू नहीं होती यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है वस्तु संरचना है:`delay: { "show": 500, "hide": 100 }`
एचटीएमएल	बूलियन	असत्य	पॉपओवर में HTML डालें। यदि गलत है, `text`तो DOM में सामग्री डालने के लिए jQuery की विधि का उपयोग किया जाएगा। यदि आप XSS हमलों के बारे में चिंतित हैं तो टेक्स्ट का उपयोग करें।
प्लेसमेंट	स्ट्रिंग \| समारोह	'सही'	पॉपओवर की स्थिति कैसे बनाएं - ऑटो \| शीर्ष \| नीचे \| बाएं \| सही। जब `auto`निर्दिष्ट किया जाता है, तो यह पॉपओवर को गतिशील रूप से पुनर्व्यवस्थित करेगा। जब किसी फ़ंक्शन का उपयोग प्लेसमेंट को निर्धारित करने के लिए किया जाता है, तो इसे पॉपओवर DOM नोड को इसके पहले तर्क के रूप में और ट्रिगर करने वाले तत्व DOM नोड को इसके दूसरे के रूप में कहा जाता है। `this`संदर्भ पॉपओवर उदाहरण पर सेट है ।
चयनकर्ता	स्ट्रिंग \| असत्य	असत्य	यदि कोई चयनकर्ता प्रदान किया जाता है, तो पॉपओवर ऑब्जेक्ट निर्दिष्ट लक्ष्यों को सौंपे जाएंगे। व्यवहार में, इसका उपयोग गतिशील HTML सामग्री को पॉपओवर जोड़ने के लिए सक्षम करने के लिए किया जाता है। इसे और एक सूचनात्मक उदाहरण देखें ।
टेम्पलेट	डोरी	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	पॉपओवर बनाते समय उपयोग करने के लिए HTML को आधार बनाएं। पॉपओवर का `title`इंजेक्शन लगाया जाएगा `.popover-header`। पॉपओवर का `content`इंजेक्शन लगाया जाएगा `.popover-body`। `.arrow`पॉपओवर का तीर बन जाएगा। सबसे बाहरी आवरण तत्व में `.popover`वर्ग होना चाहिए।
शीर्षक	स्ट्रिंग \| तत्व \| समारोह	''	डिफ़ॉल्ट शीर्षक मान यदि `title`विशेषता मौजूद नहीं है। यदि कोई फ़ंक्शन दिया जाता है, तो इसे इसके `this`संदर्भ सेट के साथ उस तत्व पर सेट किया जाएगा जिससे पॉपओवर जुड़ा हुआ है।
चालू कर देना	डोरी	'क्लिक'	पॉपओवर कैसे ट्रिगर होता है - क्लिक करें \| होवर \| फोकस \| नियमावली। आप कई ट्रिगर पास कर सकते हैं; उन्हें एक स्थान के साथ अलग करें। `manual`किसी अन्य ट्रिगर के साथ जोड़ा नहीं जा सकता।
ओफ़्सेट	संख्या \| डोरी	0	अपने लक्ष्य के सापेक्ष आबादी की भरपाई। अधिक जानकारी के लिए Popper.js के ऑफसेट डॉक्स देखें ।
फ़ॉलबैक प्लेसमेंट	स्ट्रिंग \| सरणी	'पलटना'	यह निर्दिष्ट करने की अनुमति दें कि पॉपर फ़ॉलबैक पर किस स्थिति का उपयोग करेगा। अधिक जानकारी के लिए Popper.js का व्यवहार दस्तावेज़ देखें
सीमा	स्ट्रिंग \| तत्व	'स्क्रॉल पेरेंट'	पॉपओवर की अतिप्रवाह बाधा सीमा। `'viewport'`, `'window'`, `'scrollParent'`, या HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मानों को स्वीकार करता है । अधिक जानकारी के लिए Popper.js के preventOverflow डॉक्स देखें ।
स्वच्छ	बूलियन	सच	स्वच्छता को सक्षम या अक्षम करें। सक्रिय होने `'template'`पर, `'content'`और `'title'`विकल्पों को साफ कर दिया जाएगा।
श्वेत सूची	वस्तु	डिफ़ॉल्ट मान	ऑब्जेक्ट जिसमें अनुमत विशेषताएँ और टैग शामिल हैं
सेनिटाइज एफएन	शून्य \| समारोह	शून्य	यहां आप अपने खुद के सैनिटाइज फंक्शन की आपूर्ति कर सकते हैं। यह उपयोगी हो सकता है यदि आप स्वच्छता के लिए एक समर्पित पुस्तकालय का उपयोग करना पसंद करते हैं।
पॉपपर कॉन्फिग	शून्य \| वस्तु	शून्य	बूटस्ट्रैप के डिफ़ॉल्ट Popper.js कॉन्फ़िगरेशन को बदलने के लिए, Popper.js का कॉन्फ़िगरेशन देखें

व्यक्तिगत पॉपओवर के लिए डेटा विशेषताएँ

अलग-अलग पॉपओवर के विकल्प वैकल्पिक रूप से डेटा विशेषताओं के उपयोग के माध्यम से निर्दिष्ट किए जा सकते हैं, जैसा कि ऊपर बताया गया है।

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ देखें ।

`$().popover(options)`

तत्व संग्रह के लिए पॉपओवर प्रारंभ करता है।

`.popover('show')`

किसी तत्व के पॉपओवर को प्रकट करता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में दिखाया गया है (यानी shown.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है। पॉपओवर जिनका शीर्षक और सामग्री दोनों शून्य-लंबाई हैं, कभी प्रदर्शित नहीं होते हैं।

$('#element').popover('show')

`.popover('hide')`

किसी तत्व का पॉपओवर छुपाता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में छुपाया गया है (यानी hidden.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है।

$('#element').popover('hide')

`.popover('toggle')`

किसी तत्व के पॉपओवर को टॉगल करता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में दिखाया या छिपाया गया है (अर्थात घटना shown.bs.popoverया hidden.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है।

$('#element').popover('toggle')

`.popover('dispose')`

किसी तत्व के पॉपओवर को छुपाता और नष्ट करता है। डेलिगेशन का उपयोग करने वाले पॉपओवर (जो विकल्प का उपयोग करकेselector बनाए गए हैं ) वंशज ट्रिगर तत्वों पर व्यक्तिगत रूप से नष्ट नहीं किए जा सकते हैं।

$('#element').popover('dispose')

`.popover('enable')`

किसी तत्व के पॉपओवर को दिखाने की क्षमता देता है। पॉपओवर डिफ़ॉल्ट रूप से सक्षम होते हैं।

$('#element').popover('enable')

`.popover('disable')`

किसी तत्व के पॉपओवर को दिखाने की क्षमता को हटा देता है। पॉपओवर केवल तभी दिखाया जा सकेगा जब इसे फिर से सक्षम किया गया हो।

$('#element').popover('disable')

`.popover('toggleEnabled')`

किसी तत्व के पॉपओवर को दिखाने या छिपाने की क्षमता को टॉगल करता है।

$('#element').popover('toggleEnabled')

`.popover('update')`

किसी तत्व के पॉपओवर की स्थिति को अपडेट करता है।

$('#element').popover('update')

आयोजन

घटना प्रकार	विवरण
शो.बीएस.पॉपओवर	`show`इंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
दिखाया गया.bs.popover	यह घटना तब सक्रिय होती है जब पॉपओवर उपयोगकर्ता को दिखाई देता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)।
छिपाना.bs.popover	`hide`इंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.बीएस.पॉपओवर	यह घटना तब सक्रिय हो जाती है जब पॉपओवर उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)।
डाला.bs.popover	इस घटना को उस `show.bs.popover`घटना के बाद सक्रिय किया जाता है जब पॉपओवर टेम्पलेट को DOM में जोड़ा जाता है।

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})