पोपोवेर्स

आपकी साइट के किसी भी तत्व में बूटस्ट्रैप पॉपओवर जोड़ने के लिए दस्तावेज़ और उदाहरण, जैसे कि 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 से निकालने से पहले छिपाया जाना चाहिए।

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

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

किसी पृष्ठ पर सभी पॉपओवर प्रारंभ करने का एक तरीका यह होगा कि आप उन्हें उनकी 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)

विकल्प

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

नाम	टाइप	चूक	विवरण
एनीमेशन	बूलियन	सच	पॉपओवर के लिए 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 डॉक्स देखें ।

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

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

तरीकों

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

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

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

`$().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…
})