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

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

नियाळ

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

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

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात 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...
})