Source

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 मधून संबंधित घटक काढून टाकण्यापूर्वी पॉपओव्हर्स लपलेले असणे आवश्यक आहे.
  • छाया DOM मधील घटकामुळे पॉपओव्हर्स ट्रिगर केले जाऊ शकतात.

या घटकाचा अॅनिमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा .

काही उदाहरणांसह 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>नाही आणि<button> आपण एक tabindexविशेषता देखील समाविष्ट करणे आवश्यक आहे.

<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="".

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे पॉपओव्हरवर CSS फेड संक्रमण लागू करा
कंटेनर स्ट्रिंग | घटक | खोटे खोटे

एका विशिष्ट घटकाला पॉपओव्हर जोडते. उदाहरण: container: 'body'. हा पर्याय विशेषतः उपयुक्त आहे कारण तो तुम्हाला दस्तऐवजाच्या प्रवाहात ट्रिगरिंग घटकाजवळ पॉपओव्हर ठेवण्याची परवानगी देतो - जे विंडोच्या आकार बदलादरम्यान पॉपओव्हरला ट्रिगरिंग घटकापासून दूर जाण्यापासून प्रतिबंधित करेल.

सामग्री स्ट्रिंग | घटक | कार्य ''

data-contentविशेषता उपस्थित नसल्यास डीफॉल्ट सामग्री मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisपॉपओव्हर संलग्न केलेल्या घटकाच्या संदर्भासह कॉल केले जाईल.

विलंब संख्या | वस्तू 0

पॉपओव्हर (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट रचना आहे:delay: { "show": 500, "hide": 100 }

html बुलियन खोटे पॉपओव्हरमध्ये HTML घाला. असत्य असल्यास, textDOM मध्ये सामग्री घालण्यासाठी jQuery ची पद्धत वापरली जाईल. तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
प्लेसमेंट स्ट्रिंग | कार्य 'बरोबर'

पॉपओव्हर कसे ठेवावे - ऑटो | शीर्ष | तळाशी | डावीकडे | बरोबर
जेव्हा autoनिर्दिष्ट केले जाते, तेव्हा ते पॉपओव्हर डायनॅमिकपणे पुनर्स्थित करेल.

जेव्हा एखादे फंक्शन प्लेसमेंट निर्धारित करण्यासाठी वापरले जाते, तेव्हा ते पॉपओव्हर DOM नोडला त्याचा पहिला युक्तिवाद म्हणून आणि ट्रिगरिंग घटक DOM नोडला दुसरा म्हणून म्हणतात. thisसंदर्भ पॉपओव्हर उदाहरणावर सेट केला आहे .

निवडकर्ता स्ट्रिंग | खोटे खोटे निवडक प्रदान केले असल्यास, पॉपओव्हर ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील. प्रॅक्टिसमध्ये, हे डायनॅमिक HTML सामग्री पॉपओवर जोडण्यासाठी सक्षम करण्यासाठी वापरले जाते. हे आणि एक माहितीपूर्ण उदाहरण पहा .
टेम्पलेट स्ट्रिंग '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

पॉपओव्हर तयार करताना वापरण्यासाठी बेस HTML.

पॉपओव्हर titleमध्ये इंजेक्ट केले जाईल .popover-header.

पॉपओव्हर contentमध्ये इंजेक्ट केले जाईल .popover-body.

.arrowपॉपओव्हरचा बाण होईल.

सर्वात बाहेरील आवरण घटकामध्ये .popoverवर्ग असावा.

शीर्षक स्ट्रिंग | घटक | कार्य ''

titleविशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisपॉपओव्हर संलग्न केलेल्या घटकाच्या संदर्भासह कॉल केले जाईल.

ट्रिगर स्ट्रिंग 'क्लिक करा' पॉपओव्हर कसे ट्रिगर केले जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही एकाधिक ट्रिगर्स पास करू शकता; त्यांना एका जागेसह वेगळे करा. manualइतर कोणत्याही ट्रिगरसह एकत्र केले जाऊ शकत नाही.
ऑफसेट संख्या | स्ट्रिंग 0 त्याच्या लक्ष्याच्या सापेक्ष पॉपओव्हरचा ऑफसेट. अधिक माहितीसाठी Popper.js च्या ऑफसेट डॉक्स पहा .
फॉलबॅक प्लेसमेंट स्ट्रिंग | रचना 'फ्लिप' फॉलबॅकवर पॉपर कोणते स्थान वापरेल हे निर्दिष्ट करण्यास अनुमती द्या. अधिक माहितीसाठी Popper.js च्या वर्तन डॉक्सचा संदर्भ घ्या
सीमा स्ट्रिंग | घटक 'स्क्रोल पालक' पॉपओव्हरची ओव्हरफ्लो मर्यादा सीमा. 'viewport', 'window', 'scrollParent', किंवा HTMLElement संदर्भ (केवळ JavaScript) ची मूल्ये स्वीकारते . अधिक माहितीसाठी Popper.js च्या preventOverflow डॉक्स पहा .

वैयक्तिक पॉपओव्हर्ससाठी डेटा विशेषता

वर सांगितल्याप्रमाणे वैयक्तिक पॉपओव्हरसाठी पर्याय डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

$().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')

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
show.bs.popover showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले.bs.popover जेव्हा वापरकर्त्यासाठी पॉपओव्हर दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.popover hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.popover जेव्हा पॉपओव्हर वापरकर्त्यापासून लपविले जाणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
inserted.bs.popover show.bs.popoverजेव्हा पॉपओव्हर टेम्पलेट DOM मध्ये जोडले गेले तेव्हा हा कार्यक्रम इव्हेंटनंतर काढला जातो .
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})