पोपोवर्स

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

अवलोकन

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

Popovers स्थिति के लेल 3rd पार्टी पुस्तकालय Popper.js पर निर्भर करैत अछि . अहाँ के bootstrap.js स पहिने popper.min.jsbootstrap.bundle.min.js शामिल करय पड़त या / के प्रयोग करय पड़त bootstrap.bundle.jsजाहि में Popper.js शामिल अछि ताकि popovers काज करय !
पोपोवर्स कें एकटा निर्भरता कें रूप मे टूलटिप प्लगइन कें आवश्यकता होयत छै.
यदि अहाँ हमर जावास्क्रिप्ट स्रोत सँ बना रहल छी, त' एकरा आवश्यकताutil.js अछि .
Popovers प्रदर्शन कारण सं ऑप्ट-इन अछि, तें अहां कें स्वयं ओकरा इनिशियलाइज करय पड़त .
शून्य-लंबाई titleआ contentमूल्य कहियो पोपोवर नहि देखाओत।
container: 'body'अधिक जटिल घटक (जैना कि हमरऽ इनपुट समूह, बटन समूह, आदि) म॑ रेंडरिंग समस्या स॑ बचै लेली निर्दिष्ट करलऽ जाय ।
नुकायल तत्व पर पोपोवर ट्रिगर करब काज नहि करत।
.disabledया तत्वक कें लेल पोपोवर्स कें disabledएकटा रैपर तत्व पर ट्रिगर करनाय आवश्यक छै.
जखन अनेक रेखाक कें पार लपेटय वाला लंगर सं ट्रिगर कैल जैतय, तखन पोपोवर लंगर कें समग्र चौड़ाई कें बीच केंद्रित होयत. white-space: nowrap;एहि व्यवहार सँ बचबाक लेल अपन <a>s पर प्रयोग करू ।
पोपोवर कें डीओएम सं ओकर संगत तत्वक कें हटावय सं पहिले नुकायल करनाय आवश्यक छै.

किछु उदाहरणक संग पोपोवर कोना काज करैत अछि से देखबाक लेल पढ़ैत रहू।

जेना : सब ठाम पोपोवर सक्षम करू

कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर data-toggleविशेषता द्वारा चुनल जाय:

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

जेना : `container`विकल्पक प्रयोग करब

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

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

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

व्यक्तिगत पॉपओवर कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै, जैना की ऊपर व्याख्या कैल गेल छै.

विधियाँ

अतुल्यकालिक विधि एवं संक्रमण

सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .

अधिक जानकारी के लेल हमर जावास्क्रिप्ट दस्तावेज देखू.

`$().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	ई घटना तखन फायर कएल जाइत अछि जखन पॉपओवर केँ उपयोगकर्ता केँ दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
छिपाएँ.बीएस.पोपोवर	ई घटना तुरंत फायर कएल जाइत अछि जखन `hide`इंस्टेंस मेथड कॉल कएल गेल अछि.
छिपल.बीएस.गरीबी	ई घटना तखन फायर कएल जाइत अछि जखन पॉपओवर उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)।
डालल गेल.bs.popover	ई घटना घटना के बाद फायर करलऽ जाय छै `show.bs.popover`जब॑ पॉपओवर टेम्पलेट क॑ डीओएम म॑ जोड़लऽ गेलऽ छै ।

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