पोपोवर्स के नाम से जानल जाला

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

अवलोकन कइल जाव

पॉपओवर प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:

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

पढ़त रहीं कि कुछ उदाहरण का साथे पोपोवर कइसे काम करेला.

उदाहरण खातिर: हर जगह पोपोवर सक्षम करीं

पन्ना पर सभ पॉपओवर सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के 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=""।

नांव	किसिम	बाकी	बिबरन
एनीमेशन के बारे में बतावल गइल बा	बूलियन के बा	सच	पोपोवर पर एगो सीएसएस फेड संक्रमण लागू करीं
कंटेनर के बा	तार के बा \| तत्व के बारे में बतावल गइल बा \| गलत	गलत	पोपोवर के एगो विशिष्ट तत्व में जोड़ देला। उदाहरण खातिर : `container: 'body'`. ई विकल्प खासतौर पर एह मायने में उपयोगी बा कि ई रउआँ के ट्रिगरिंग तत्व के लगे दस्तावेज के प्रवाह में पॉपओवर के पोजीशन देवे के इजाजत देला - जवन विंडो रिसाइज के दौरान पॉपओवर के ट्रिगरिंग तत्व से दूर बहे से रोकी।
सामग्री	तार के बा \| तत्व के बारे में बतावल गइल बा \| परोजन	'' के बा।	`data-content`अगर विशेषता मौजूद ना होखे त डिफ़ॉल्ट सामग्री मान । अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर `this`संदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से पोपोवर जुड़ल बा.
देरी	नंबर के बा \| वस्तु	0 के बा	पोपोवर देखावे आ छिपावे में देरी (ms) - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा:`delay: { "show": 500, "hide": 100 }`
एचटीएमएल के बा	बूलियन के बा	गलत	पोपोवर में एचटीएमएल डालल जाला। अगर गलत बा, त jQuery के `text`तरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं.
प्लेसमेंट के बा	तार के बा \| परोजन	'ठीक'	पोपोवर के पोजीशन कईसे कईल जाला - ऑटो \| ऊपर के बा \| नीचे के बा \| छोड़ के बा \| ठीक. जब `auto`निर्दिष्ट हो जाई त ई गतिशील रूप से पोपोवर के रिओरिएंट करी। जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के पॉपओवर DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। `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`संदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से पोपोवर जुड़ल बा.
ट्रिगर	डोरी	'क्लिक करे' के बा।	पोपोवर कइसे ट्रिगर होला - क्लिक करीं \| होवर करे के बा \| फोकस करे के बा \| हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. `मैनुअल` के कवनो दोसर ट्रिगर के साथे ना जोड़ल जा सकेला।
ऑफसेट हो गइल बा	नंबर के बा \| डोरी	0 के बा	अपना लक्ष्य के सापेक्ष पोपोवर के ऑफसेट। अधिक जानकारी खातिर Popper.js के ऑफसेट डॉक्स देखल जाय ।
fallbackप्लेसमेंट के बा	तार के बा \| सरणी के बा	'पलटी'	ई बतावे के अनुमति दीं कि पॉपर फॉलबैक पर कवना स्थिति के इस्तेमाल करी. अधिक जानकारी खातिर 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 के बा	`show`इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल.bs.popover	ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
छिपावे के.बी.एस.पोपओवर के बा	ई इवेंट तुरंत फायर हो जाला जब `hide`इंस्टेंस मेथड के कॉल हो जाला।
छिपल.बीएस.गरीबी के बा	ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
डालल गइल बा.बीएस.गरीब	ई इवेंट ओह `show.bs.popover`इवेंट के बाद फायर कइल जाला जब पॉपओवर टेम्पलेट के DOM में जोड़ दिहल जाला।

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