पोपोवर्स

अवलोकन करना

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

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

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

उदाहरण दे

पोपोवर सक्षम करो

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

लाइव डेमो

निम्नलिखित लाइव पोपोवर रेंडर करने आस्तै अस उपर दित्ते गेदे स्निपेट दे समान जावास्क्रिप्ट दा इस्तेमाल करदे आं। शीर्षक दे माध्यम कन्नै सेट कीते जंदे न data-bs-titleते शरीर सामग्री दे माध्यम कन्नै सेट कीती जंदी ऐ data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चार दिशाएं

चार विकल्प उपलब्ध न: ऊपर, दाएं, थल्ले, ते बाएं। आरटीएल च बूटस्ट्रैप दा इस्तेमाल करदे बेल्लै दिशा-निर्देशें गी मिरर कीता जंदा ऐ। data-bs-placementदिशा बदलने लेई सेट करो ।

<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>

रवाजcontainer

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

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

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

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

कस्टम पोपोवर

तुस CSS चर दा इस्तेमाल करदे होई पोपोवरें दी शक्ल गी अनुकूलित करी सकदे ओ . अस अपने कस्टम रूप गी स्कोप करने आस्तै इक कस्टम क्लास सेट करने आं data-bs-custom-class="custom-popover"ते इसदा इस्तेमाल किश लोकल CSS चर गी ओवरराइड करने आस्तै करदे आं.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

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

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

सीएसएस दा

चर करने वाले

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, पॉपओवर हून .popoverबधाए गेदे रियल-टाइम अनुकूलन आस्तै लोकल CSS चर पर इस्तेमाल करदे न। CSS चर आस्तै मूल्यें गी Sass दे राहें सेट कीता जंदा ऐ, इसलेई Sass अनुकूलन अजें बी समर्थत ऐ, बी.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

सस्स चर

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

प्रयोग करना

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

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

विकल्प ऐ

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

बूटस्ट्रैप 5.2.0 दे रूप च, सारे घटक इक प्रयोगात्मक आरक्षित डेटा विशेषता दा समर्थन करदे data-bs-configन जेह् ड़ा इक JSON स्ट्रिंग दे रूप च सरल घटक कॉन्फ़िगरेशन गी रक्खी सकदा ऐ. जदूं कुसै तत्व च data-bs-config='{"delay":0, "title":123}'ते data-bs-title="456"गुण होंदे न तां अंतिम titleमूल्य होग 456ते बक्ख-बक्ख डेटा विशेषताएं गी पर दित्ते गेदे मूल्यें गी ओवरराइड करग data-bs-config. इसदे अलावा, मौजूदा डेटा विशेषताएं JSON मूल्यें गी घर बनाने च समर्थ न जिऱयां data-bs-delay='{"show":0,"hide":150}'.

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

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

विधियां

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

घटनाएं

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})