पोपोवर्स

अवलोकन

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

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

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

उदाहरण के लिये

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

जेना कि ऊपर कहल गेल छै, अहां कें पोपोवर कें उपयोग करय सं पहिले ओकर इनिशियलाइज करनाय आवश्यक छै. कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर 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>

सीएसएस

चर

बूटस्ट्रैप केरऽ विकसित सीएसएस चर दृष्टिकोण के हिस्सा के रूप म॑, पॉपओवर अब॑ .popoverबढ़लऽ वास्तविक समय अनुकूलन लेली स्थानीय सीएसएस चर क॑ ऑन के उपयोग करै छै । 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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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...
})