पोपोवेर्स

अवलोकन

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

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

कुछ उदाहरणों के साथ पॉपओवर कैसे काम करते हैं, यह देखने के लिए पढ़ते रहें।

उदाहरण

पॉपओवर सक्षम करें

जैसा कि ऊपर उल्लेख किया गया है, आपको पॉपओवर का उपयोग करने से पहले इनिशियलाइज़ करना होगा। किसी पेज पर सभी पॉपओवर को इनिशियलाइज़ करने का एक तरीका यह होगा कि आप उन्हें उनकी 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ताकि पॉपओवर का HTML उस तत्व के बजाय दिखाई दे। यह प्रतिक्रियाशील तालिकाओं, इनपुट समूहों और इसी तरह के अन्य क्षेत्रों में आम है।

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"हम अपनी कस्टम उपस्थिति के दायरे के साथ एक कस्टम क्लास सेट करते हैं और कुछ स्थानीय सीएसएस चर को ओवरराइड करने के लिए इसका इस्तेमाल करते हैं।

.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...
})