मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
in English

पोपोवर्स

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

अवलोकन करना

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

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

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

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

इक पृष्ठ पर सारे पॉपओवरें गी शुरू करने दा इक तरीका एह् होग जे उ'नेंगी उंदी data-bs-toggleविशेषता कन्नै चुनना:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

उदाहरण : containerविकल्प दा इस्तेमाल करना

जदूं तुंदे कोल इक पैतृक तत्व पर किश शैलियां होंदियां न जेह् ड़ियां इक पोपोवर कन्नै हस्तक्षेप करदियां न , तां तुस इक कस्टम निर्दिश्ट करना चांह् दे ओ containerतां जे पोपओवर दा एचटीएमएल उस तत्व दे अंदर इसदे बजाय दिक्खेआ जा.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

मसाल

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

अगले क्लिक पर बर्खास्त करो

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

अगले-क्लिक पर बर्खास्तगी आस्तै विशिश्ट मार्कअप दी लोड़ ऐ

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

अक्षम तत्व

विशेषता आह् ले तत्व disabledइंटरएक्टिव नेईं न, मतलब बरतूनी इक पॉपओवर (जां टूलटिप) गी ट्रिगर करने आस्तै उ’नेंगी होवर नेईं करी सकदे जां क्लिक नेईं करी सकदे न. इक समाधान दे रूप च, तुस इक रैपर थमां पोपोवर गी ट्रिगर करना चांह् दे ओ <div>जां <span>, आदर्श रूप कन्नै कीबोर्ड-फोकस करने योग्य बनाया गेदा ऐ tabindex="0".

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

सस्स

चर करने वाले

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

प्रयोग करना

जावास्क्रिप्ट दे राहें पोपोवर सक्षम करो:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

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

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

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

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

विकल्प ऐ

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

ध्यान रक्खो जे सुरक्षा कारणें करी sanitize, sanitizeFn, ते allowListविकल्पें गी डेटा विशेषताएं दा इस्तेमाल करियै सप्लाई नेईं कीता जाई सकदा ऐ.
नां किसम डिफाल्ट ब्यौरा
animation बूलियन true पोपोवर पर इक सीएसएस फीड संक्रमण लागू करो
container तार | तत्व | गलत false

पोपोवर गी इक विशिष्ट तत्व कन्नै जोड़दा ऐ। उदाहरण : container: 'body'ऐ . एह् विकल्प इस चाल्लीं खास तौर उप्पर उपयोगी ऐ जे एह् तुसेंगी ट्रिगर करने आह् ले तत्व दे कोल दस्तावेज दे प्रवाह च पोपोवर गी तैह् त करने दी इजाजत दिंदा ऐ - जेह् ड़ा विंडो आकार बदलने दौरान पोपोवर गी ट्रिगर करने आह् ले तत्व थमां दूर तैह् त होने थमां रोकग.

content तार | तत्व | फंक्शन ''

data-bs-contentजेकर विशेषता मौजूद नेईं ऐ तां डिफाल्ट सामग्री मूल्य .

thisजेकर कोई फंक्शन दित्ता गेदा ऐ तां उसी उस तत्व गी अपने संदर्भ सेट कन्नै बुलाया जाग जिस कन्नै पोपोवर जुड़े दा ऐ.

delay नंबर | चीज 0

पोपोवर गी दस्सने ते छिपाने च देरी (ms) - मैन्युअल ट्रिगर प्रकार पर लागू नेईं होंदा ऐ

जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिक्खो दोनें पर देरी लागू कीती जंदी ऐ

वस्तु संरचना ऐ :delay: { "show": 500, "hide": 100 }

html बूलियन false पोपोवर च एचटीएमएल सम्मिलित करो। जेकर गलत innerTextऐ तां डीओएम च सामग्री गी सम्मिलित करने आस्तै प्रॉपर्टी दा इस्तेमाल कीता जाग. जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो.
placement तार | फंक्शन 'right'

पोपोवर गी कैसे पोजीशन देना - ऑटो | टॉप | नीचे | बाईं ओर | स्हेई.
जदूं autoनिर्दिश्ट कीता जंदा ऐ तां एह् गतिशील रूप कन्नै पोपोवर गी पुनर्निर्देशित करग।

जदूं कुसै फंक्शन दा इस्तेमाल प्लेसमेंट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी पोपोवर डीओएम नोड गी अपने पैह् ले तर्क दे रूप च ते ट्रिगर करने आह् ले तत्व डीओएम नोड गी अपने दुए दे रूप च बुलाया जंदा ऐ। thisसंदर्भ पोपोवर इंस्टेंस पर सेट कीता गेदा ऐ ।

selector तार | गलत false जेकर कोई चयनकर्ता उपलब्ध करोआया गेआ ऐ तां पोपोवर वस्तुएं गी निर्दिश्ट लक्ष्यें गी सौंपेआ जाग। व्यवहार च, इसदा इस्तेमाल गतिशील HTML सामग्री गी पॉपओवर जोड़ने च सक्षम बनाने लेई कीता जंदा ऐ। एह् ते इक जानकारीपूर्ण उदाहरण दिक्खो .
template डोर '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

पोपोवर बनांदे बेल्लै इस्तेमाल करने आस्तै एचटीएमएल आधार करो।

पोपोवर दा titleइंजेक्शन दित्ता जाग .popover-header.

पोपोवर दा contentइंजेक्शन दित्ता जाग .popover-body.

.popover-arrowपोपोवर दा तीर बन जावेगा।

सबतूं बाहरले रैपर तत्व च .popoverवर्ग होना चाहिदा ऐ।

title तार | तत्व | फंक्शन ''

titleजेकर विशेषता मौजूद नेईं ऐ तां डिफाल्ट शीर्शक मान .

thisजेकर कोई फंक्शन दित्ता गेदा ऐ तां उसी उस तत्व गी अपने संदर्भ सेट कन्नै बुलाया जाग जिस कन्नै पोपोवर जुड़े दा ऐ.

trigger डोर 'click' पोपोवर किस चाल्ली ट्रिगर होंदा ऐ - क्लिक करो | होवर करना | फोकस करना | हत्थी. तुस मते सारे ट्रिगर पास करी सकदे ओ; इन्हें इक जगह कन्नै बक्खरा करो। manualकुसै होर ट्रिगर कन्नै नेईं जोड़ेआ जाई सकदा ऐ।
fallbackPlacements सरणी ['top', 'right', 'bottom', 'left'] सरणी च प्लेसमेंटें दी सूची (पसंदी दे क्रम च) उपलब्ध करोआइयै फॉलबैक प्लेसमेंटें गी परिभाशत करो। होर मती जानकारी आस्तै पोपर दे व्यवहार डॉक्स दिक्खो
boundary तार | तत्व 'clippingParents' पोपोवर दी ओवरफ्लो बाधा सीमा (केवल पॉपर दे preventOverflow संशोधक पर लागू होंदा ऐ)। डिफ़ॉल्ट रूप कन्नै एह् 'clippingParents'इक HTMLElement संदर्भ ऐ ते स्वीकार करी सकदा ऐ (केवल जावास्क्रिप्ट दे राहें)। होर मती जानकारी आस्तै दिक्खो Popper's detectOverflow docs .
customClass तार | फंक्शन ''

पोपोवर च क्लासें गी जोड़ेआ जा जिसलै एह् दस्सेआ जंदा ऐ। ध्यान रक्खो जे एह् वर्गें गी टेम्पलेट च निर्दिश्ट कुसै बी वर्ग दे अलावा जोड़ेआ जाग। कई वर्गें गी जोड़ने लेई, उनेंगी स्पेस कन्नै बक्ख करो: 'class-1 class-2'.

तुस इक फंक्शन बी पास करी सकदे ओ जेह् ड़ा इक गै स्ट्रिंग रिटर्न करना चाहिदा जिस च अतिरिक्त क्लास दे नांऽ होंदे न.

sanitize बूलियन true सेनेटाइजेशन गी सक्षम जां अक्षम करो। अगर सक्रिय कीता गेआ ऐ 'template', 'content'ते 'title'विकल्पें गी सेनेटाइज कीता जाग। साढ़े जावास्क्रिप्ट दस्तावेजें च सैनिटाइजर खंड दिक्खो .
allowList चीज डिफ़ॉल्ट मान ऐ वस्तु जिस च अनुमति दित्ती गेदी विशेषताएं ते टैग होंदे न
sanitizeFn शून्य | फंक्शन null इत्थें तुस अपने सेनेटाइज फंक्शन गी सप्लाई करी सकदे ओ। जेकर तुस सेनेटाइजेशन करने लेई समर्पित लाइब्रेरी दा इस्तेमाल करना पसंद करदे ओ तां एह् फायदेमंद होई सकदा ऐ।
offset सरणी | तार | फंक्शन [0, 8]

अपने लक्ष्य दे सापेक्ष पोपोवर दा ऑफसेट। तुस अल्पविराम कन्नै बक्ख कीते गेदे मूल्यें कन्नै डेटा विशेषताएं च इक स्ट्रिंग पास करी सकदे ओ जि’यां:data-bs-offset="10,20"

जदूं कुसै फंक्शन दा इस्तेमाल ऑफसेट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी इक वस्तु कन्नै बुलाया जंदा ऐ जिस च पॉपर प्लेसमेंट, संदर्भ, ते पॉपर रेक्ट्स गी इसदे पैह् ले तर्क दे रूप च शामल कीता जंदा ऐ। ट्रिगर करने आह् ले तत्व DOM नोड गी दुए तर्क दे रूप च पास कीता जंदा ऐ। फंक्शन गी दो नंबरें कन्नै इक सरणी वापस करना होग: .[skidding, distance]

होर मती जानकारी आस्तै दिक्खो पोपर दे ऑफसेट डॉक्स .

popperConfig शून्य | वस्तु | फंक्शन null

बूटस्ट्रैप दी डिफाल्ट पॉपर कॉन्फ़िगरेशन बदलने लेई, दिक्खो पॉपर कॉन्फ़िगरेशन .

जदूं कुसै फंक्शन दा इस्तेमाल पॉपर कॉन्फ़िगरेशन बनाने आस्तै कीता जंदा ऐ तां इसगी इक ऐसी वस्तु कन्नै बुलाया जंदा ऐ जेह् ड़ी बूटस्ट्रैप दी डिफाल्ट पॉपर कॉन्फ़िगरेशन होंदी ऐ. एह् तुसेंगी अपने खुद दे कॉन्फ़िगरेशन कन्नै डिफाल्ट गी बरतने ते मर्ज करने च मदद करदा ऐ. फंक्शन गी पॉपर आस्तै इक कॉन्फ़िगरेशन वस्तु वापस करना होग.

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

व्यक्तिगत पोपोवरें लेई विकल्पें गी वैकल्पिक रूप कन्नै डेटा विशेषताएं दे इस्तेमाल दे माध्यम कन्नै निर्दिश्ट कीता जाई सकदा ऐ, जि’यां उप्पर दित्ते गेदे तरीके कन्नै।

कन्नै फंक्शन दा इस्तेमाल करनाpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

विधियां

एसिंक्रोनस तरीके ते संक्रमण

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

होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो .

शो

इक तत्व दा पोपोवर उजागर करदा ऐ। पोपोवर गी असल च दस्से जाने थमां पैह् ले (यानी shown.bs.popoverघटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ। इसगी पोपोवर दी इक “मैनुअल” ट्रिगरिंग मन्नेआ जंदा ऐ। पोपोवर जिंदा टाइटल ते सामग्री दोनों शून्य-लंबाई होंदी ऐ, कदें बी प्रदर्शत नेईं कीती जंदी।

myPopover.show()

छिप्पो

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

myPopover.hide()

टॉगल करदे

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

myPopover.toggle()

निपटान करना

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

myPopover.dispose()

समर्थ

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

myPopover.enable()

नकारा

इक तत्व दे पोपोवर गी दस्सने दी क्षमता गी हटांदा ऐ। पोपोवर गी तदूं गै दस्सेआ जाई सकदा ऐ जेकर एह् दुबारा सक्षम कीता जंदा ऐ।

myPopover.disable()

टॉगलसक्षम कीता गेदा ऐ

इक तत्व दे पोपोवर गी दस्सने जां छिपाने दी क्षमता गी टॉगल करदा ऐ।

myPopover.toggleEnabled()

अपडेट

इक तत्व दे पोपोवर दी स्थिति गी अपडेट करदा ऐ।

myPopover.update()

getInstance दा

स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़ी दी पोपोवर इंस्टेंस हासल करने दी इजाजत दिंदी ऐ

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance ऐ

स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़ी दी पोपोवर इंस्टेंस हासल करने दी इजाजत दिंदी ऐ , जां इस मामले च इक नमां बनाओ जेकर एह् शुरू नेईं कीता गेआ हा

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

घटनाएं

घटना दा प्रकार ब्यौरा
दिखाओ।बीएस।पोपओवर showइंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ।
दिखाया।बी.एस.पोपोवर एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपओवर गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)।
छिपाओ।बीएस.पोपोवर इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hideइंस्टेंस विधि गी बुलाया गेआ ऐ.
छिपा।बीएस.गरीबी एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपोवर बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)।
डाला।बीएस.गरीबी इस घटना गी उस show.bs.popoverघटना दे बाद फायर कीता जंदा ऐ जिसलै पोपोवर टेम्पलेट गी डीओएम च जोड़ेआ गेआ ऐ.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})