पोपोवर्स

अवलोकन

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

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

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

जेना : सब ठाम पोपोवर सक्षम करू

कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर 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()

निपटान करब

कोनों तत्व कें पॉपओवर कें छिपायत छै आ नष्ट करयत छै (DOM तत्व पर संग्रहीत डाटा कें हटायत छै). प्रतिनिधिमंडल कें उपयोग करय वाला पोपोवर (जे विकल्प कें उपयोग करयतselector बनायल गेलय छै ) कें वंशज ट्रिगर तत्वक पर व्यक्तिगत रूप सं नष्ट नहि कैल जा सकय छै.

myPopover.dispose()

योग्य करनाइ

कोनो तत्व के पोपोवर के देखाबय के क्षमता दैत अछि. पोपोवर्स डिफ़ॉल्ट रूप सँ सक्षम अछि.

myPopover.enable()

असमर्थ

कोनो तत्व के पोपोवर के लेल देखाबय के क्षमता हटा दैत अछि. पोपोवर तखने देखाओल जा सकैत अछि जखन ओकरा फेर सं सक्षम कएल जाएत.

myPopover.disable()

toggleसक्षम कएल गेल

कोनों तत्व कें पॉपओवर कें दिखावा या छिपाबै कें क्षमता कें टॉगल करयत छै.

myPopover.toggleEnabled()

अपडेट

कोनो तत्वक पॉपओवर क स्थिति अपडेट करैत अछि.

myPopover.update()

getInstance

स्थिर विधि जे अहां कें एकटा डोम तत्व सं जुड़ल पोपोवर इंस्टेंस प्राप्त करय कें अनुमति देयत छै

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