in English

Popovers

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

आढावा

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

  • पोपॉवर पोजीशनिंगसाठी तृतीय पक्ष लायब्ररी पॉपरवर अवलंबून असतात . तुम्ही bootstrap.js आधी popper.min.jsbootstrap.bundle.min.js समाविष्ट करणे आवश्यक आहे किंवा popovers कार्य करण्यासाठी / bootstrap.bundle.jsज्यामध्ये Popper समाविष्ट आहे वापरा!
  • Popovers ला अवलंबित्व म्हणून टूलटिप प्लगइन आवश्यक आहे.
  • जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहेutil.js .
  • Popovers कार्यप्रदर्शन कारणांसाठी निवडले जातात, त्यामुळे तुम्ही ते स्वतःच सुरू केले पाहिजेत .
  • शून्य-लांबी titleआणि contentमूल्ये कधीही पॉपओव्हर दर्शवणार नाहीत.
  • container: 'body'अधिक जटिल घटकांमध्ये (जसे आमचे इनपुट गट, बटण गट इ.) रेंडरिंग समस्या टाळण्यासाठी निर्दिष्ट करा .
  • लपविलेल्या घटकांवर पॉपओव्हर ट्रिगर करणे कार्य करणार नाही.
  • .disabledरॅपर घटकावर किंवा disabledघटकांसाठी पॉपओव्हर्स ट्रिगर केले जाणे आवश्यक आहे.
  • एकाहून अधिक ओळींमध्ये गुंडाळलेल्या अँकरमधून ट्रिगर केल्यावर, पॉपओव्हर्स अँकरच्या एकूण रुंदीमध्ये केंद्रित केले जातील. हे वर्तन टाळण्यासाठी .text-nowrapतुमच्या s वर वापरा .<a>
  • DOM मधून संबंधित घटक काढून टाकण्यापूर्वी पॉपओव्हर्स लपलेले असणे आवश्यक आहे.
  • छाया DOM मधील घटकामुळे पॉपओव्हर्स ट्रिगर केले जाऊ शकतात.
डीफॉल्टनुसार, हा घटक अंगभूत सामग्री सॅनिटायझर वापरतो, जो स्पष्टपणे परवानगी नसलेले कोणतेही HTML घटक काढून टाकतो. अधिक तपशीलांसाठी आमच्या JavaScript दस्तऐवजीकरणातील सॅनिटायझर विभाग पहा .
या घटकाचा अॅनिमेशन प्रभाव 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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
GPU प्रवेग

GPU प्रवेग आणि सुधारित प्रणाली DPI मुळे Windows 10 डिव्हाइसेसवर पॉपओव्हर्स कधीकधी अस्पष्ट दिसतात. v4 मध्ये यासाठी उपाय म्हणजे तुमच्या popovers वर आवश्यकतेनुसार GPU प्रवेग अक्षम करणे.

सुचवलेले निराकरण:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

कीबोर्ड आणि सहाय्यक तंत्रज्ञान वापरकर्त्यांसाठी पॉपओवर कार्य करणे

कीबोर्ड वापरकर्त्यांना तुमचे पॉपओव्हर्स सक्रिय करण्याची परवानगी देण्यासाठी, तुम्ही त्यांना केवळ HTML घटकांमध्ये जोडले पाहिजे जे परंपरेने कीबोर्ड-फोकस करण्यायोग्य आणि परस्परसंवादी (जसे की लिंक्स किंवा फॉर्म कंट्रोल्स) आहेत. जरी अनियंत्रित HTML घटक (जसे की <span>s) विशेषता जोडून फोकस करण्यायोग्य बनवले जाऊ शकतात tabindex="0", हे कीबोर्ड वापरकर्त्यांसाठी गैर-परस्परसंवादी घटकांवर संभाव्य त्रासदायक आणि गोंधळात टाकणारे टॅब स्टॉप जोडेल आणि बहुतेक सहाय्यक तंत्रज्ञान सध्या या परिस्थितीत पॉपओव्हर सामग्रीची घोषणा करत नाहीत. . hoverयाव्यतिरिक्त, तुमच्या पॉपओव्हर्ससाठी ट्रिगर म्हणून पूर्णपणे विसंबून राहू नका , कारण यामुळे कीबोर्ड वापरकर्त्यांसाठी ट्रिगर करणे अशक्य होईल.

तुम्ही पर्यायासह पॉपओव्हरमध्ये समृद्ध, संरचित HTML समाविष्ट करू शकता html, तरीही आम्ही जोरदार शिफारस करतो की तुम्ही जास्त प्रमाणात सामग्री जोडणे टाळा. aria-describedbyपॉपओव्हर्सची सध्या कार्य करण्याची पद्धत अशी आहे की, एकदा प्रदर्शित झाल्यानंतर, त्यांची सामग्री विशेषतासह ट्रिगर घटकाशी जोडली जाते. परिणामी, पॉपओव्हरची संपूर्ण सामग्री सहाय्यक तंत्रज्ञान वापरकर्त्यांना एक दीर्घ, अखंड प्रवाह म्हणून घोषित केली जाईल.

याव्यतिरिक्त, तुमच्या पॉपओव्हरमध्ये परस्पर नियंत्रणे (जसे की फॉर्म घटक किंवा लिंक्स) समाविष्ट करणे शक्य असताना (हे घटक whiteListकिंवा अनुमत विशेषता आणि टॅगमध्ये जोडून), हे लक्षात ठेवा की सध्या पॉपओव्हर कीबोर्ड फोकस ऑर्डर व्यवस्थापित करत नाही. जेव्हा कीबोर्ड वापरकर्ता पॉपओव्हर उघडतो तेव्हा ट्रिगरिंग घटकावर लक्ष केंद्रित केले जाते आणि पॉपओव्हर सहसा दस्तऐवजाच्या संरचनेतील ट्रिगरचे लगेच अनुसरण करत नाही, पुढे जाणे/दाबणे याची कोणतीही हमी नाही.TABकीबोर्ड वापरकर्त्याला पॉपओव्हरमध्येच हलवेल. थोडक्यात, पॉपओव्हरमध्ये फक्त परस्परसंवादी नियंत्रणे जोडल्याने ही नियंत्रणे कीबोर्ड वापरकर्त्यांसाठी आणि सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांसाठी अगम्य/निरुपयोगी बनू शकतात किंवा कमीतकमी एक अतार्किक संपूर्ण फोकस ऑर्डर बनवण्याची शक्यता आहे. या प्रकरणांमध्ये, त्याऐवजी मोडल संवाद वापरण्याचा विचार करा.

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

लक्षात ठेवा की सुरक्षेच्या कारणास्तव डेटा विशेषता वापरून sanitize, sanitizeFnआणि whiteListपर्याय पुरवले जाऊ शकत नाहीत.
नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे पॉपओव्हरवर 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 त्याच्या लक्ष्याच्या सापेक्ष पॉपओव्हरचा ऑफसेट. अधिक माहितीसाठी पॉपर्स ऑफसेट डॉक्स पहा .
फॉलबॅक प्लेसमेंट स्ट्रिंग | रचना 'फ्लिप' फॉलबॅकवर पॉपर कोणते स्थान वापरेल हे निर्दिष्ट करण्यास अनुमती द्या. अधिक माहितीसाठी पॉपरचे वर्तन डॉक्स पहा
कस्टम क्लास स्ट्रिंग | कार्य ''

पॉपओव्हर दाखवल्यावर वर्ग जोडा. लक्षात ठेवा की हे वर्ग टेम्प्लेटमध्ये नमूद केलेल्या कोणत्याही वर्गांव्यतिरिक्त जोडले जातील. एकाधिक वर्ग जोडण्यासाठी, त्यांना रिक्त स्थानांसह विभक्त करा: 'a b'.

तुम्ही एक फंक्शन देखील पास करू शकता ज्याने अतिरिक्त वर्ग नावे असलेली एकल स्ट्रिंग परत केली पाहिजे.

सीमा स्ट्रिंग | घटक 'स्क्रोल पालक' पॉपओव्हरची ओव्हरफ्लो मर्यादा सीमा. 'viewport', 'window', 'scrollParent', किंवा HTMLElement संदर्भ (केवळ JavaScript) ची मूल्ये स्वीकारते . अधिक माहितीसाठी Popper's preventOverflow डॉक्स पहा .
निर्जंतुकीकरण बुलियन खरे स्वच्छता सक्षम किंवा अक्षम करा. सक्रिय केल्यास 'template', 'content'आणि 'title'पर्याय निर्जंतुक केले जातील. आमच्या JavaScript दस्तऐवजीकरणातील सॅनिटायझर विभाग पहा .
श्वेतसूची वस्तू डीफॉल्ट मूल्य ऑब्जेक्ट ज्यामध्ये अनुमत विशेषता आणि टॅग आहेत
sanitizeFn शून्य | कार्य निरर्थक येथे तुम्ही तुमचे स्वतःचे सॅनिटाइज फंक्शन देऊ शकता. तुम्ही सॅनिटायझेशन करण्यासाठी समर्पित लायब्ररी वापरण्यास प्राधान्य दिल्यास हे उपयुक्त ठरू शकते.
popperConfig शून्य | वस्तू निरर्थक बूटस्ट्रॅपचे डीफॉल्ट पॉपर कॉन्फिगरेशन बदलण्यासाठी, पॉपरचे कॉन्फिगरेशन पहा

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

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

पद्धती

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

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

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

$().popover(options)

घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.

.popover('show')

घटकाचे पॉपओव्हर प्रकट करते. पॉपओव्हर प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येतो (म्हणजे shown.bs.popoverइव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते. Popovers ज्यांचे शीर्षक आणि सामग्री दोन्ही शून्य-लांबीचे आहेत ते कधीही प्रदर्शित केले जात नाहीत.

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