पोपोवेर्स

अवलोकन

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

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

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

उदाहरण: हर जगह पॉपओवर सक्षम करें

किसी पृष्ठ पर सभी पॉपओवर प्रारंभ करने का एक तरीका यह होगा कि आप उन्हें उनकी 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ताकि पॉपओवर का HTML उस तत्व के बजाय दिखाई दे।

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=""। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय विकल्प नाम के केस प्रकार को कैमलकेस से कबाब-केस में बदलना सुनिश्चित करें। उदाहरण के लिए, उपयोग करने के बजाय 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()

टॉगल सक्षम

किसी तत्व के पॉपओवर को दिखाने या छिपाने की क्षमता को टॉगल करता है।

myPopover.toggleEnabled()

अपडेट करें

किसी तत्व के पॉपओवर की स्थिति को अपडेट करता है।

myPopover.update()

दृष्टांत लो

स्टेटिक विधि जो आपको 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...
})