पोपोवर्स

तुंदी साइट पर कुसै बी तत्व च आईओएस च पाए जाने आह् ले जनेह् बूटस्ट्रैप पॉपओवरें गी जोड़ने आस्तै दस्तावेजीकरण ते उदाहरण।

अवलोकन करना

पॉपओवर प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:

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

इस घटक दा एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करदा ऐ। साढ़े सुलभता दस्तावेजें दा घट्ट कीती गेदी गति खंड दिक्खो .

कुछ उदाहरनें कन्नै पोपोवर किस चाल्ली कम्म करदे न एह् दिक्खने आस्तै पढ़दे रौह्ओ।

उदाहरण: हर जगह पोपोवर सक्षम करो

इक पृष्ठ पर सारे पॉपओवरें गी शुरू करने दा इक तरीका एह् होग जे उ'नेंगी उंदी 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)

कीबोर्ड ते सहायक तकनीक दे बरतूनी आस्तै पोपोवरें गी कम्म करने आस्तै बनाना

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

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

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-animation="".

ध्यान रक्खो जे सुरक्षा कारणें करी sanitize, sanitizeFnते whiteListविकल्पें गी डेटा विशेषताएं दा इस्तेमाल करियै सप्लाई नेईं कीता जाई सकदा ऐ.

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

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