Popovers

बूटस्ट्रॅप पॉपओवर जोडण्यासाठी दस्तऐवजीकरण आणि उदाहरणे, जसे की iOS मध्ये आढळतात, तुमच्या साइटवरील कोणत्याही घटकामध्ये.

आढावा

पॉपओव्हर प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

• पोपॉव्हर्स पोजीशनिंगसाठी तृतीय पक्ष लायब्ररी Popper.js वर अवलंबून असतात . तुम्ही bootstrap.js आधी popper.min.js समाविष्ट करणे आवश्यक आहे किंवा popovers कार्य करण्यासाठी ज्यामध्ये Popper.js समाविष्ट आहे bootstrap.bundle.min.js/ वापरा!bootstrap.bundle.js
• Popovers ला अवलंबित्व म्हणून टूलटिप प्लगइन आवश्यक आहे.
• जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहेutil.js .
• Popovers कार्यप्रदर्शन कारणांसाठी निवडले जातात, त्यामुळे तुम्ही ते स्वतःच सुरू केले पाहिजेत .
• शून्य-लांबी titleआणि contentमूल्ये कधीही पॉपओव्हर दर्शवणार नाहीत.
• container: 'body'अधिक जटिल घटकांमध्ये (जसे आमचे इनपुट गट, बटण गट इ.) रेंडरिंग समस्या टाळण्यासाठी निर्दिष्ट करा .
• लपविलेल्या घटकांवर पॉपओव्हर ट्रिगर करणे कार्य करणार नाही.
• .disabledरॅपर घटकावर किंवा disabledघटकांसाठी पॉपओव्हर्स ट्रिगर केले जाणे आवश्यक आहे.
• एकाहून अधिक ओळींमध्ये गुंडाळलेल्या अँकरमधून ट्रिगर केल्यावर, पॉपओव्हर्स अँकरच्या एकूण रुंदीमध्ये केंद्रित केले जातील. हे वर्तन टाळण्यासाठी .text-nowrapतुमच्या s वर वापरा .<a>
• DOM मधून संबंधित घटक काढून टाकण्यापूर्वी पॉपओव्हर्स लपलेले असणे आवश्यक आहे.

काही उदाहरणांसह popovers कसे कार्य करतात हे पाहण्यासाठी वाचन सुरू ठेवा.

उदाहरण: सर्वत्र popovers सक्षम करा

पृष्ठावरील सर्व पॉपओव्हर्स सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या 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>

वापर

JavaScript द्वारे popovers सक्षम करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये 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')

घटकाच्या पॉपओव्हरला दाखवण्याची क्षमता देते. Popovers डीफॉल्टनुसार सक्षम आहेत.

$('#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…
})