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

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

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

• पोपोवर्स पोजीशनिंग खातिर थर्ड पार्टी लाइब्रेरी पॉपर पर निर्भर बा । रउआँ के पहिले 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>

सीएसएस के बा

चर के बारे में बतावल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, पॉपओवर सभ अब .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 ” से “ कबाब-केस ” में बदलल सुनिश्चित करीं । जइसे कि के 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...
})