पोपोवर्स

अवलोकन करना

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

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

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

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

इक पृष्ठ पर सारे पॉपओवरें गी शुरू करने दा इक तरीका एह् होग जे उ'नेंगी उंदी 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 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)

विकल्प ऐ

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

कन्नै फंक्शन दा इस्तेमाल करना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

घटनाएं

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