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

नियाळ

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

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

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

उदाहरणां

पोपोव्हर्स सक्षम करात

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

लायव्ह डेमो

सकयल दिल्लो लायव्ह पॉपओवर रेंडर करपाक आमी वयर दिल्ल्या स्निपेटा सारकी जावास्क्रिप्ट वापरतात. शीर्षकां वरवीं सेट करतात data-bs-titleआनी बॉडी कंटेंट वरवीं सेट करतात data-bs-content.

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

चार दिकां

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

<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>

कस्टमcontainer

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

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

आन्येक परिस्थिती जंय तुमकां स्पश्ट सानुकूल सेट करपाची इत्सा जातली ती एक मोडल संवादcontainer भितर popovers , popover स्वता मोडल जोडला हाची खात्री करपाक. परस्पर संवादात्मक घटक आशिल्ल्या पॉपओव्हरां खातीर हें खासा म्हत्वाचें – मोडल संवाद फोकस सापडटले, देखून पोपोव्हर मोडलाचो भुरगो घटक ना जाल्यार, वापरप्यांक हे परस्पर संवादात्मक घटक लक्ष केंद्रीत करूंक वा सक्रिय करूंक मेळचे नात.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

रूढी पोपोव्हर्स

तुमी CSS चडांत चड वापरून पॉपओव्हरांचे रूप पसंतीचे करूंक शकतात . data-bs-custom-class="custom-popover"आमी आमच्या सानुकूल दिसपाक व्याप्ती दिवपाक एक सानुकूल वर्ग सेट करतात आनी कांय थळाव्या CSS चडांत चड ओव्हररायड करपाक वापरतात.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

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

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

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

const popover = new bootstrap.Popover('.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>

सीएसएस हें नांव

चड-उणें

Bootstrap च्या विकसीत जावपी CSS चड-उणें पद्दतीचो एक भाग म्हूण, पॉपओव्हर आतां .popoverवाडयल्ल्या रियल-टायम पसंतीखातीर थळाव्या CSS चड-उणें चालू वापरतात. CSS चयापचयांखातीर मोलां Sass वरवीं सेट केल्लीं आसात, देखून Sass पसंतीचें अजूनय समर्थीत आसा, तेंय.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

सॅस चड-उणें

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

वापर

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

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

पर्याय आसात

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

Bootstrap 5.2.0 प्रमाणें, सगळे घटक प्रायोगिक राखीव डेटा गुणधर्माक तेंको दितात data-bs-configजे JSON स्ट्रिंग म्हणून सादें घटक संरचना दवरूंक शकता. जेन्ना घटकाक data-bs-config='{"delay":0, "title":123}'आनी data-bs-title="456"गुणधर्म आसतात, तेन्ना निमाणें titleमोल आसतलें 456आनी वेगळे डेटा गुणधर्म चेर दिल्ल्या मोलांक अधिलिखित करतले data-bs-config. ते भायर, सद्याचे डेटा गुणधर्म JSON मोलां सारकीं दवरपाक सक्षम आसात data-bs-delay='{"show":0,"hide":150}'.

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

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

पद्दती

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

घडणुको

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