Source

पोपोव्हर्स हें नांव

तुमच्या साइटचेर खंयच्याय घटकाक iOS त मेळपी सारके Bootstrap popovers जोडपा खातीर दस्तावेजीकरण आनी उदाहरणां.

नियाळ

पॉपओवर प्लगइन वापरतना कळपाच्यो गजाली:

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

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

कांय उदाहरणां सयत पोपोव्हर कशे काम करतात तें पळोवपाक वाचत रावचें.

देखीक: सगळेकडेन पोपोव्हर सक्षम करात

पानाचेर सगळे पॉपओव्हर आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या 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>

वापर

जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:

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

कीबोर्ड आनी सहाय्यक तंत्रज्ञान वापरप्यां खातीर पॉपओव्हर काम करप

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

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

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-animation="".

लक्षांत दवरात की सुरक्षेच्या कारणांक लागून sanitize, sanitizeFnआनी whiteListपर्याय डेटा गुणधर्म वापरून पुरवण करूंक शकना.

नांव प्रकार डिफॉल्ट वर्णन
एनिमेशन करप बूलियन हें नांव खरें पॉपओवराक CSS फेड संक्रमण लागू करात
आयदनांत घालतात तार | तत्व | फट फट

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

data-contentगुणधर्म हाजीर ना जाल्यार मुलभूत सामुग्री मोल .

फंक्शन दिल्लें आसल्यार, तें thisपोपोव्हर जोडिल्ल्या घटकाक ताचो संदर्भ सेट करून कॉल करतले.
कळाव संख्या | ऑब्जॅक्ट ० आनी ०

पॉपओवर दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना

क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता

वस्तूची रचणूक अशी आसा: १.delay: { "show": 500, "hide": 100 }
एचटीएमएल हें नांव बूलियन हें नांव फट पॉपओवरांत एचटीएमएल घालात. textखोटें आसल्यार, DOM त सामुग्री घालपाखातीर 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हेर खंयच्याय ट्रिगराक जोडूंक मेळना.
ऑफसेट करप संख्या | माळ ० आनी ० ताच्या लक्ष्याच्या सापेक्ष पोपोव्हराचें ऑफसेट. चड म्हायती खातीर Popper.js च्या ऑफसेट डॉक्स पळयात .
fallbackप्लेसमेंट करप तार | सरणी 'टिचकी' फॉलबॅकाचेर पॉपर खंयची स्थिती वापरतलो तें स्पश्ट करपाक परवानगी दिवची. चड म्हायती खातीर Popper.js च्या वर्तन दस्तावेज पळयात
शिमेचेर आसता तार | घटक 'स्क्रॉलपॅरेंट'. पोपोवराची ओव्हरफ्लो बंधन मर्यादा. 'viewport', 'window', 'scrollParent', वा HTMLElement संदर्भ (फकत जावास्क्रिप्ट) ची मोलां स्वीकारता . चड म्हायती खातीर Popper.js च्या preventOverflow docs पळयात .
सॅनिटायज करप बूलियन हें नांव खरें सॅनिटायझेशन सक्षम वा अक्षम करचें. If activated 'template', 'content'आनी 'title'पर्याय सॅनिटायज जातले.
whiteList हें नांव ऑब्जॅक्ट मुलभूत मोल परवानगी दिल्ले गुणधर्म आनी टॅग आशिल्ली वस्तू
सॅनिटायज करपFn शून्य | कार्य शुन्य हांगा तुमी तुमचें स्वताचें सॅनिटायज फंक्शन पुरवण करूंक शकतात. सॅनिटायझेशन करपाक तुमकां समर्पीत लायब्ररी वापरपाक आवडटा जाल्यार हें उपेगी पडूं येता.
popperConfig हें नांव शून्य | ऑब्जॅक्ट शुन्य Bootstrap ची मुलभूत Popper.js संरचना बदलपाक, Popper.js ची संरचना पळयात

वैयक्तीक पोपोव्हरां खातीर डेटा गुणधर्म

वैयक्तीक पॉपओव्हरां खातीर पर्याय पर्यायीपणान डेटा गुणधर्मांच्या वापरा वरवीं निर्देशीत करूंक शकतात, जशें वयर स्पश्ट केलां.

पद्दती

अतुल्यकालिक पद्दती आनी संक्रमण

सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .

चड म्हायती खातीर आमचें जावास्क्रिप्ट दस्तावेज पळयात .

$().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 वापरप्याक पॉपओव्हर दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
hide.bs.popover हें नांव hideदृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता .
लिपलां.बीएस.गरीबी वापरप्या कडल्यान पोपोव्हर लिपोवप सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
घालून.bs.popover show.bs.popoverजेन्ना पॉपओव्हर साचा DOM कडेन जोडला तेन्ना घडणुके उपरांत ही इव्हेंट फायर करतात. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})