पोपोवेर्स

आपकी साइट के किसी भी तत्व में बूटस्ट्रैप पॉपओवर जोड़ने के लिए दस्तावेज़ और उदाहरण, जैसे कि iOS में पाए जाने वाले पॉपओवर।

अवलोकन

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

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

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

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

किसी पृष्ठ पर सभी पॉपओवर प्रारंभ करने का एक तरीका यह होगा कि आप उन्हें उनकी data-toggleविशेषता के आधार पर चुनें:

$(function () {
  $('[data-toggle="popover"]').popover()
})

उदाहरण: containerविकल्प का उपयोग करना

जब आपके पास मूल तत्व पर कुछ शैलियाँ हैं जो पॉपओवर में बाधा डालती हैं, तो आप एक कस्टम निर्दिष्ट करना चाहेंगे containerताकि पॉपओवर का HTML उस तत्व के बजाय दिखाई दे।

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

उदाहरण

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

अगले क्लिक पर खारिज करें

focusउपयोगकर्ता के अगले क्लिक पर टॉगल एलिमेंट के अलावा किसी दूसरे एलीमेंट पर पॉपओवर को खारिज करने के लिए ट्रिगर का इस्तेमाल करें .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

अक्षम तत्व

विशेषता वाले तत्व disabledइंटरैक्टिव नहीं हैं, जिसका अर्थ है कि उपयोगकर्ता पॉपओवर (या टूलटिप) ट्रिगर करने के लिए उन्हें होवर या क्लिक नहीं कर सकते हैं। वर्कअराउंड के रूप में, आप पॉपओवर को एक रैपर से ट्रिगर करना चाहेंगे <div>या अक्षम तत्व पर <span>ओवरराइड करना चाहेंगे।pointer-events

अक्षम पॉपओवर ट्रिगर के लिए, आप यह भी पसंद कर सकते हैं data-trigger="hover"कि पॉपओवर आपके उपयोगकर्ताओं को तत्काल दृश्य प्रतिक्रिया के रूप में दिखाई दे क्योंकि वे अक्षम तत्व पर क्लिक करने की अपेक्षा नहीं कर सकते हैं।

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

प्रयोग

जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करें:

$('#example').popover(options)

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-animation=""।

तरीकों

$().popover(options)

तत्व संग्रह के लिए पॉपओवर प्रारंभ करता है।

.popover('show')

किसी तत्व के पॉपओवर को प्रकट करता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में दिखाया गया है (यानी shown.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है। पॉपओवर जिनके शीर्षक और सामग्री दोनों शून्य-लंबाई वाले हैं, कभी प्रदर्शित नहीं होते हैं।

$('#element').popover('show')

.popover('hide')

किसी तत्व का पॉपओवर छुपाता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में छुपाया गया है (यानी hidden.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है।

$('#element').popover('hide')

.popover('toggle')

किसी तत्व के पॉपओवर को टॉगल करता है। पॉपओवर से पहले कॉलर को रिटर्न वास्तव में दिखाया या छिपाया गया है (अर्थात घटना shown.bs.popoverया hidden.bs.popoverघटना होने से पहले)। इसे पॉपओवर का "मैनुअल" ट्रिगर माना जाता है।

$('#element').popover('toggle')

.popover('dispose')

किसी तत्व के पॉपओवर को छुपाता और नष्ट करता है। डेलिगेशन का उपयोग करने वाले पॉपओवर (जो विकल्प का उपयोग करकेselector बनाए गए हैं ) वंशज ट्रिगर तत्वों पर व्यक्तिगत रूप से नष्ट नहीं किए जा सकते हैं।

$('#element').popover('dispose')

.popover('enable')

किसी तत्व के पॉपओवर को दिखाने की क्षमता देता है। पॉपओवर डिफ़ॉल्ट रूप से सक्षम होते हैं।

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

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

$('#element').popover('update')

आयोजन

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})