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

नियाळ

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

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

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

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

पानाचेर सगळे पॉपओव्हर आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-bs-toggleगुणधर्मा प्रमाणें निवडप:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

देखीक: containerपर्याय वापरप

जेन्ना तुमचे कडेन पालक घटकाचेर कांय शैली आसतात जीं पॉपओवरांत हस्तक्षेप करतात, तेन्ना तुमकां सानुकूल निर्देशीत करूंक जाय containerजेणे करून ताचे बदला पोपोव्हराचो HTML त्या घटका भितर दिसतलो.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

उदारण

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चार दिकां

चार पर्याय उपलब्ध आसात: वयर, उजवें, सकयल, आनी डावें संरेखित. RTL त Bootstrap वापरतना दिश्टीकोन मिरर जातात.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

फुडल्या क्लिकाचेर डिसमिस करात

focusटॉगल घटका परस वेगळ्या घटकाचेर वापरप्याच्या फुडल्या क्लिकाचेर पॉपओव्हर काडून उडोवपाक ट्रिगर वापरात .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

अक्षम केल्ले घटक

गुणधर्म आशिल्ले घटक disabledपरस्पर संवादात्मक नात, म्हळ्यार वापरप्यांक पॉपओवर (वा साधनटिप) सुरू करपाक तांकां होवर वा क्लिक करूंक मेळना. एक उपाय म्हणून, तुमकां एक रॅपरांतल्यान पॉपओवर ट्रिगर करपाक जाय <div>वा <span>, आदर्श रितीन वापरून कीबोर्ड-केंद्रीत करपाक योग्य केल्लें tabindex="0".

अक्षम पॉपओवर ट्रिगरां खातीर, तुमी पसंत करूंक शकतात data-bs-trigger="hover focus"जेणे करून पॉपओवर तुमच्या वापरप्यांक तात्काळ दृश्य प्रतिसाद दिसतलो कारण ते अक्षम घटकाचेर क्लिक करपाची अपेक्षा करूंक शकनात.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

सास

चड-उणें

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

वापर

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

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-bs-, जशें data-bs-animation="". डेटा गुणधर्मां वरवीं पर्याय पास करतना पर्याय नांवाचो केस प्रकार camelCase वयल्यान kebab-case कडेन बदलपाची खात्री करात. देखीक, वापरचे बदला data-bs-customClass="beautifier"वापरात data-bs-custom-class="beautifier".

कडेन फंक्शन वापरपpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

पद्दती

दाखोवचें

एका घटकाचो पोपोव्हर उक्तो करता. पॉपओवर प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.popoverघडणूक घडचे पयलीं) कॉलराक परतता. हाका पोपोव्हराचें “हस्तिका” ट्रिगरिंग मानतात. ज्या पोपोव्हरांचें शीर्षक आनी आशय दोनूय शून्य लांबायेचे आसतात, ते केन्नाच दाखोवंक नात.

myPopover.show()

लिपोवचें

एका घटकाचो पोपोव्हर लिपयता. पॉपओव्हर प्रत्यक्षांत लिपोवचे पयलीं (म्हळ्यार hidden.bs.popoverघडणूक घडचे पयलीं) कॉलराक परतता. हाका पोपोव्हराचें “हस्तिका” ट्रिगरिंग मानतात.

myPopover.hide()

टॉगल करप

एका घटकाचो पॉपओवर टॉगल करता. पॉपओवर प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार shown.bs.popoverवा hidden.bs.popoverघडणूक घडचे पयलीं) कॉलराक परतता. हाका पोपोव्हराचें “हस्तिका” ट्रिगरिंग मानतात.

myPopover.toggle()

विलो लावप

घटकाचो पॉपओवर लिपयता आनी नश्ट करता (DOM घटकाचेर सांठयल्लो डेटा काडून उडयता). प्रतिनिधीत्व वापरपी पोपोव्हर (जे पर्याय वापरून तयार केल्लेselector आसात ) वंशज ट्रिगर घटकांचेर वैयक्तीकपणान नश्ट करूंक शकना.

myPopover.dispose()

सक्षम

एका घटकाच्या पोपोव्हराक दाखोवपाची तांक दिता. Popovers पूर्वनिर्धारीतपणान सक्षम केल्ले आसात.

myPopover.enable()

निश्क्रीय करचें

एका घटकाचो पोपोव्हर दाखोवपाची तांक काडून उडयता. पोपोव्हर फकत परतून सक्षम केल्यारूच दाखोवंक मेळटलो.

myPopover.disable()

toggleसक्षम केला

घटकाचो पॉपओवर दाखोवपाची वा लिपोवपाची क्षमता टॉगल करता.

myPopover.toggleEnabled()

अपडेट

घटकाच्या पॉपओवराची सुवात अद्ययावत करता.

myPopover.update()

getInstance हें नांव

स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली पॉपओवर दृष्टांत मेळोवपाक परवानगी दिता

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance हें पान करचें

स्थिर पद्दत जी तुमकां DOM घटका कडेन संबंदीत पॉपओवर दृष्टांत मेळोवपाक परवानगी दिता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करपाक परवानगी दिता

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

घडणुको

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})