ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
in English

ಪಾಪೋವರ್ಸ್

ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿನ ಯಾವುದೇ ಅಂಶಕ್ಕೆ iOS ನಲ್ಲಿ ಕಂಡುಬರುವಂತಹ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪಾಪೋವರ್‌ಗಳನ್ನು ಸೇರಿಸಲು ದಾಖಲೆ ಮತ್ತು ಉದಾಹರಣೆಗಳು.

ಅವಲೋಕನ

ಪಾಪೋವರ್ ಪ್ಲಗಿನ್ ಬಳಸುವಾಗ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ವಿಷಯಗಳು:

  • Popovers ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ 3rd ಪಾರ್ಟಿ ಲೈಬ್ರರಿ Popper ಅನ್ನು ಅವಲಂಬಿಸಿದೆ . ನೀವು bootstrap.js ಮೊದಲು popper.min.js ಅನ್ನು ಸೇರಿಸಬೇಕು ಅಥವಾ popovers ಕೆಲಸ ಮಾಡಲು Popper ಅನ್ನು ಒಳಗೊಂಡಿರುವ bootstrap.bundle.min.js/ bootstrap.bundle.jsಅನ್ನು ಬಳಸಬೇಕು!
  • ಪಾಪೋವರ್‌ಗಳಿಗೆ ಟೂಲ್‌ಟಿಪ್ ಪ್ಲಗಿನ್ ಅವಲಂಬನೆಯಾಗಿ ಅಗತ್ಯವಿದೆ.
  • ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ Popovers ಆಯ್ಕೆಯಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಅವುಗಳನ್ನು ನೀವೇ ಪ್ರಾರಂಭಿಸಬೇಕು .
  • ಶೂನ್ಯ-ಉದ್ದ titleಮತ್ತು contentಮೌಲ್ಯಗಳು ಎಂದಿಗೂ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸುವುದಿಲ್ಲ.
  • container: 'body'ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಘಟಕಗಳಲ್ಲಿ (ನಮ್ಮ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳು, ಬಟನ್ ಗುಂಪುಗಳು, ಇತ್ಯಾದಿ) ರೆಂಡರಿಂಗ್ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ .
  • ಗುಪ್ತ ಅಂಶಗಳ ಮೇಲೆ ಪಾಪೋವರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುವುದು ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ.
  • ಪೊಪೊವರ್‌ಗಳು .disabledಅಥವಾ disabledಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ರ್ಯಾಪರ್ ಅಂಶದ ಮೇಲೆ ಪ್ರಚೋದಿಸಬೇಕು.
  • ಬಹು ಸಾಲುಗಳಲ್ಲಿ ಸುತ್ತುವ ಆಂಕರ್‌ಗಳಿಂದ ಪ್ರಚೋದಿಸಿದಾಗ, ಆಂಕರ್‌ಗಳ ಒಟ್ಟಾರೆ ಅಗಲದ ನಡುವೆ ಪಾಪೋವರ್‌ಗಳು ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತವೆ. ಈ ನಡವಳಿಕೆಯನ್ನು ತಪ್ಪಿಸಲು .text-nowrapನಿಮ್ಮ s ನಲ್ಲಿ ಬಳಸಿ .<a>
  • DOM ನಿಂದ ಅವುಗಳ ಅನುಗುಣವಾದ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಮೊದಲು ಪಾಪೋವರ್‌ಗಳನ್ನು ಮರೆಮಾಡಬೇಕು.
  • ನೆರಳು DOM ಒಳಗಿನ ಅಂಶಕ್ಕೆ ಧನ್ಯವಾದಗಳು Popovers ಅನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಈ ಘಟಕವು ಅಂತರ್ನಿರ್ಮಿತ ವಿಷಯ ಸ್ಯಾನಿಟೈಜರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಸ್ಪಷ್ಟವಾಗಿ ಅನುಮತಿಸದ ಯಾವುದೇ HTML ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ಸ್ಯಾನಿಟೈಸರ್ ವಿಭಾಗವನ್ನು ನೋಡಿ .
ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು prefers-reduced-motionಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆಗೊಳಿಸಿದ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ .

ಕೆಲವು ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಪಾಪೋವರ್ಸ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.

ಉದಾಹರಣೆ: ಎಲ್ಲೆಡೆ ಪಾಪೋವರ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ

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 ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವಾಗ ನಿರ್ದೇಶನಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲಾಗುತ್ತದೆ.

<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>ಸರಿಯಾದ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಮತ್ತು ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ನಡವಳಿಕೆಗಾಗಿ, ನೀವು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬೇಕು, ಟ್ಯಾಗ್ ಅಲ್ಲ , ಮತ್ತು ನೀವು ಗುಣಲಕ್ಷಣವನ್ನು <button>ಸಹ ಸೇರಿಸಬೇಕು .tabindex

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

ಬಳಕೆ

JavaScript ಮೂಲಕ ಪಾಪೋವರ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

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

ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಬಳಕೆದಾರರಿಗೆ popovers ಕೆಲಸ ಮಾಡುವಂತೆ ಮಾಡುವುದು

ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ಪಾಪೋವರ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಅನುಮತಿಸಲು, ನೀವು ಅವುಗಳನ್ನು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಕೀಬೋರ್ಡ್-ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ (ಲಿಂಕ್‌ಗಳು ಅಥವಾ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಂತಹ) HTML ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಸೇರಿಸಬೇಕು. ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಅನಿಯಂತ್ರಿತ HTML ಅಂಶಗಳನ್ನು (ಉದಾಹರಣೆಗೆ <span>s) ಕೇಂದ್ರೀಕರಿಸಬಹುದಾದರೂ tabindex="0", ಇದು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಸಂವಾದಾತ್ಮಕವಲ್ಲದ ಅಂಶಗಳ ಮೇಲೆ ಸಂಭಾವ್ಯ ಕಿರಿಕಿರಿ ಮತ್ತು ಗೊಂದಲಮಯ ಟ್ಯಾಬ್ ಸ್ಟಾಪ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಪ್ರಸ್ತುತ ಈ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ಪಾಪೋವರ್‌ನ ವಿಷಯವನ್ನು ಪ್ರಕಟಿಸುವುದಿಲ್ಲ. . ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಿಮ್ಮ ಪಾಪೋವರ್‌ಗಳಿಗೆ ಪ್ರಚೋದಕವಾಗಿ ಮಾತ್ರ ಅವಲಂಬಿಸಬೇಡಿ hover, ಏಕೆಂದರೆ ಇದು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಚೋದಿಸಲು ಅಸಾಧ್ಯವಾಗುತ್ತದೆ.

ಆಯ್ಕೆಯೊಂದಿಗೆ ನೀವು ಶ್ರೀಮಂತ, ರಚನಾತ್ಮಕ HTML ಅನ್ನು ಪಾಪೋವರ್‌ಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದಾದರೂ html, ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ವಿಷಯವನ್ನು ಸೇರಿಸುವುದನ್ನು ತಡೆಯಲು ನಾವು ಬಲವಾಗಿ ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. aria-describedbyಪಾಪೋವರ್‌ಗಳು ಪ್ರಸ್ತುತ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ವಿಧಾನವೆಂದರೆ, ಒಮ್ಮೆ ಪ್ರದರ್ಶಿಸಿದರೆ, ಅವುಗಳ ವಿಷಯವನ್ನು ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಪ್ರಚೋದಕ ಅಂಶಕ್ಕೆ ಜೋಡಿಸಲಾಗುತ್ತದೆ . ಇದರ ಪರಿಣಾಮವಾಗಿ, ಪಾಪೋವರ್‌ನ ಸಂಪೂರ್ಣ ವಿಷಯವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಬಳಕೆದಾರರಿಗೆ ಒಂದು ದೀರ್ಘವಾದ, ತಡೆರಹಿತ ಸ್ಟ್ರೀಮ್‌ನಂತೆ ಘೋಷಿಸಲಾಗುತ್ತದೆ.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಿಮ್ಮ ಪಾಪೋವರ್‌ನಲ್ಲಿ (ಅನುಮತಿಸಿದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್‌ಗಳಿಗೆ ಈ ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ) ಸಂವಾದಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳನ್ನು (ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್‌ಗಳು ಅಥವಾ ಲಿಂಕ್‌ಗಳಂತಹ) ಸೇರಿಸಲು allowListಸಾಧ್ಯವಿರುವಾಗ, ಪ್ರಸ್ತುತ ಪಾಪೋವರ್ ಕೀಬೋರ್ಡ್ ಫೋಕಸ್ ಆರ್ಡರ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಎಂದು ತಿಳಿದಿರಲಿ. ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಪಾಪೋವರ್ ಅನ್ನು ತೆರೆದಾಗ, ಪ್ರಚೋದಕ ಅಂಶದ ಮೇಲೆ ಗಮನವು ಉಳಿಯುತ್ತದೆ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್‌ನ ರಚನೆಯಲ್ಲಿನ ಪ್ರಚೋದಕವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪಾಪೋವರ್ ತಕ್ಷಣವೇ ಅನುಸರಿಸುವುದಿಲ್ಲವಾದ್ದರಿಂದ, ಮುಂದಕ್ಕೆ ಚಲಿಸುವ/ಒತ್ತುವ ಯಾವುದೇ ಗ್ಯಾರಂಟಿ ಇರುವುದಿಲ್ಲTABಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರನ್ನು ಪಾಪೋವರ್‌ಗೆ ಸರಿಸುತ್ತದೆ. ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಹೇಳುವುದಾದರೆ, ಪಾಪೋವರ್‌ಗೆ ಸಂವಾದಾತ್ಮಕ ನಿಯಂತ್ರಣಗಳನ್ನು ಸರಳವಾಗಿ ಸೇರಿಸುವುದರಿಂದ ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಈ ನಿಯಂತ್ರಣಗಳನ್ನು ತಲುಪಲಾಗುವುದಿಲ್ಲ/ಬಳಕೆಯಾಗದಂತೆ ಮಾಡುತ್ತದೆ ಅಥವಾ ಕನಿಷ್ಠ ತರ್ಕಬದ್ಧವಲ್ಲದ ಒಟ್ಟಾರೆ ಫೋಕಸ್ ಆರ್ಡರ್ ಅನ್ನು ಮಾಡುತ್ತದೆ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಬದಲಿಗೆ ಮಾದರಿ ಸಂವಾದವನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-bs-, data-bs-animation="". ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಕ್ಯಾಮೆಲ್‌ಕೇಸ್‌ನಿಂದ ಕಬಾಬ್-ಕೇಸ್‌ಗೆ ಬದಲಾಯಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ಬಳಸುವ ಬದಲು , data-bs-customClass="beautifier"ಬಳಸಿ data-bs-custom-class="beautifier".

ಭದ್ರತಾ ಕಾರಣಗಳಿಗಾಗಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು sanitize, sanitizeFnಮತ್ತು allowListಆಯ್ಕೆಗಳನ್ನು ಪೂರೈಸಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
ಹೆಸರು ಮಾದರಿ ಡೀಫಾಲ್ಟ್ ವಿವರಣೆ
animation ಬೂಲಿಯನ್ true ಪಾಪೋವರ್‌ಗೆ CSS ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
container ದಾರ | ಅಂಶ | ಸುಳ್ಳು false

ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಪಾಪೋವರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಉದಾಹರಣೆ: container: 'body'. ಈ ಆಯ್ಕೆಯು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದ್ದು, ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಹರಿವಿನಲ್ಲಿ ಪ್ರಚೋದಕ ಅಂಶದ ಬಳಿ ಪಾಪೋವರ್ ಅನ್ನು ಇರಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ - ಇದು ವಿಂಡೋ ಮರುಗಾತ್ರದ ಸಮಯದಲ್ಲಿ ಪ್ರಚೋದಕ ಅಂಶದಿಂದ ದೂರ ತೇಲುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

content ದಾರ | ಅಂಶ | ಕಾರ್ಯ ''

data-bs-contentಗುಣಲಕ್ಷಣವು ಇಲ್ಲದಿದ್ದರೆ ಡಿಫಾಲ್ಟ್ ವಿಷಯ ಮೌಲ್ಯ .

ಒಂದು ಕಾರ್ಯವನ್ನು ನೀಡಿದರೆ, thisಪಾಪೋವರ್ ಲಗತ್ತಿಸಲಾದ ಅಂಶಕ್ಕೆ ಅದರ ಉಲ್ಲೇಖದೊಂದಿಗೆ ಅದನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ.

delay ಸಂಖ್ಯೆ | ವಸ್ತು 0

popover (ms) ಅನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ವಿಳಂಬ - ಹಸ್ತಚಾಲಿತ ಪ್ರಚೋದಕ ಪ್ರಕಾರಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ

ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ

ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ:delay: { "show": 500, "hide": 100 }

html ಬೂಲಿಯನ್ false ಪಾಪೋವರ್‌ಗೆ HTML ಅನ್ನು ಸೇರಿಸಿ. ತಪ್ಪಾಗಿದ್ದರೆ, innerTextDOM ಗೆ ವಿಷಯವನ್ನು ಸೇರಿಸಲು ಆಸ್ತಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ನೀವು XSS ದಾಳಿಗಳ ಬಗ್ಗೆ ಚಿಂತೆ ಮಾಡುತ್ತಿದ್ದರೆ ಪಠ್ಯವನ್ನು ಬಳಸಿ.
placement ದಾರ | ಕಾರ್ಯ 'right'

ಪಾಪೋವರ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಸ್ವಯಂ | ಅಗ್ರ | ಕೆಳಗೆ | ಬಿಟ್ಟು | ಬಲ. ನಿರ್ದಿಷ್ಟಪಡಿಸಿದಾಗ, ಇದು ಪಾಪೋವರ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮರುಹೊಂದಿಸುತ್ತದೆ
.auto

ನಿಯೋಜನೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಪಾಪೋವರ್ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಎರಡನೆಯದಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ. ಸಂದರ್ಭವನ್ನು ಪಾಪೋವರ್ thisನಿದರ್ಶನಕ್ಕೆ ಹೊಂದಿಸಲಾಗಿದೆ.

selector ದಾರ | ಸುಳ್ಳು false ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ನಿರ್ದಿಷ್ಟ ಗುರಿಗಳಿಗೆ ಪಾಪೋವರ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ. ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಪಾಪೋವರ್‌ಗಳನ್ನು ಸೇರಿಸಲು ಡೈನಾಮಿಕ್ HTML ವಿಷಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ .
template ಸ್ಟ್ರಿಂಗ್ '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

ಪಾಪೋವರ್ ಅನ್ನು ರಚಿಸುವಾಗ ಬಳಸಲು ಬೇಸ್ HTML.

ಪಾಪೋವರ್ titleಅನ್ನು ಚುಚ್ಚಲಾಗುತ್ತದೆ .popover-header.

ಪಾಪೋವರ್ contentಅನ್ನು ಚುಚ್ಚಲಾಗುತ್ತದೆ .popover-body.

.popover-arrowಪಾಪೋವರ್‌ನ ಬಾಣವಾಗುತ್ತದೆ.

ಹೊರಗಿನ ಹೊದಿಕೆ ಅಂಶವು .popoverವರ್ಗವನ್ನು ಹೊಂದಿರಬೇಕು.

title ದಾರ | ಅಂಶ | ಕಾರ್ಯ ''

titleಗುಣಲಕ್ಷಣವು ಇಲ್ಲದಿದ್ದರೆ ಡೀಫಾಲ್ಟ್ ಶೀರ್ಷಿಕೆ ಮೌಲ್ಯ .

ಒಂದು ಕಾರ್ಯವನ್ನು ನೀಡಿದರೆ, thisಪಾಪೋವರ್ ಲಗತ್ತಿಸಲಾದ ಅಂಶಕ್ಕೆ ಅದರ ಉಲ್ಲೇಖದೊಂದಿಗೆ ಅದನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ.

trigger ಸ್ಟ್ರಿಂಗ್ 'click' ಪಾಪೋವರ್ ಅನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ - ಕ್ಲಿಕ್ ಮಾಡಿ | ಸುಳಿದಾಡಿ | ಗಮನ | ಕೈಪಿಡಿ. ನೀವು ಬಹು ಪ್ರಚೋದಕಗಳನ್ನು ರವಾನಿಸಬಹುದು; ಅವುಗಳನ್ನು ಜಾಗದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ. manualಯಾವುದೇ ಇತರ ಪ್ರಚೋದಕಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ.
fallbackPlacements ಶ್ರೇಣಿ ['top', 'right', 'bottom', 'left'] ಶ್ರೇಣಿಯಲ್ಲಿರುವ ನಿಯೋಜನೆಗಳ ಪಟ್ಟಿಯನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಫಾಲ್‌ಬ್ಯಾಕ್ ಪ್ಲೇಸ್‌ಮೆಂಟ್‌ಗಳನ್ನು ವಿವರಿಸಿ (ಆದ್ಯತೆಯ ಕ್ರಮದಲ್ಲಿ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ನಡವಳಿಕೆ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ
boundary ದಾರ | ಅಂಶ 'clippingParents' ಪಾಪೋವರ್‌ನ ಓವರ್‌ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ (ಪಾಪರ್‌ನ ಪ್ರಿವೆಂಟ್‌ಓವರ್‌ಫ್ಲೋ ಮಾರ್ಪಾಡಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ). ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಇದು 'clippingParents'HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖವನ್ನು ಸ್ವೀಕರಿಸಬಹುದು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ಡಿಟೆಕ್ಟ್‌ಓವರ್‌ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
customClass ದಾರ | ಕಾರ್ಯ ''

ಅದನ್ನು ತೋರಿಸಿದಾಗ ಪಾಪೋವರ್‌ಗೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ. ಟೆಂಪ್ಲೇಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಯಾವುದೇ ತರಗತಿಗಳಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಈ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬಹು ವರ್ಗಗಳನ್ನು ಸೇರಿಸಲು, ಅವುಗಳನ್ನು ಸ್ಪೇಸ್‌ಗಳೊಂದಿಗೆ ಪ್ರತ್ಯೇಕಿಸಿ: 'class-1 class-2'.

ಹೆಚ್ಚುವರಿ ವರ್ಗದ ಹೆಸರುಗಳನ್ನು ಹೊಂದಿರುವ ಒಂದೇ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ ಕಾರ್ಯವನ್ನು ಸಹ ನೀವು ರವಾನಿಸಬಹುದು.

sanitize ಬೂಲಿಯನ್ true ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ. ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ 'template', 'content'ಮತ್ತು 'title'ಆಯ್ಕೆಗಳನ್ನು ಸ್ಯಾನಿಟೈಸ್ ಮಾಡಲಾಗುತ್ತದೆ. ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ಸ್ಯಾನಿಟೈಸರ್ ವಿಭಾಗವನ್ನು ನೋಡಿ .
allowList ವಸ್ತು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ ಅನುಮತಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ವಸ್ತು
sanitizeFn ಶೂನ್ಯ | ಕಾರ್ಯ null ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಯಾನಿಟೈಜ್ ಕಾರ್ಯವನ್ನು ಪೂರೈಸಬಹುದು. ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಮೀಸಲಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
offset ವ್ಯೂಹ | ದಾರ | ಕಾರ್ಯ [0, 8]

ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪಾಪೋವರ್‌ನ ಆಫ್‌ಸೆಟ್. ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ನೀವು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ರವಾನಿಸಬಹುದು:data-bs-offset="10,20"

ಆಫ್‌ಸೆಟ್ ಅನ್ನು ನಿರ್ಧರಿಸಲು ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿದಾಗ, ಪಾಪ್ಪರ್ ಪ್ಲೇಸ್‌ಮೆಂಟ್, ರೆಫರೆನ್ಸ್ ಮತ್ತು ಪಾಪ್ಪರ್ ರೆಕ್ಟ್‌ಗಳನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಲಾಗಿದೆ. ಕಾರ್ಯವು ಎರಡು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಸರಣಿಯನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು: .[skidding, distance]

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ಆಫ್‌ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .

popperConfig ಶೂನ್ಯ | ವಸ್ತು | ಕಾರ್ಯ null

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಪಾಪ್ಪರ್‌ನ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೋಡಿ .

ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ರಚಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಸ್ವಂತ ಕಾನ್ಫಿಗರೇಶನ್‌ನೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಬಳಸಲು ಮತ್ತು ವಿಲೀನಗೊಳಿಸಲು ಇದು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಕಾರ್ಯವು ಪಾಪ್ಪರ್‌ಗಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.

ವೈಯಕ್ತಿಕ ಪಾಪೋವರ್‌ಗಳಿಗಾಗಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು

ಮೇಲೆ ವಿವರಿಸಿದಂತೆ ವೈಯಕ್ತಿಕ ಪಾಪೋವರ್‌ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದುpopperConfig

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

ವಿಧಾನಗಳು

ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು

ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ .

ತೋರಿಸು

ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ 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()

toggleEnabled

ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ಸಾಮರ್ಥ್ಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

myPopover.toggleEnabled()

ನವೀಕರಿಸಿ

ಅಂಶದ ಪಾಪೋವರ್‌ನ ಸ್ಥಾನವನ್ನು ನವೀಕರಿಸುತ್ತದೆ.

myPopover.update()

ಪಡೆಯಿರಿ ನಿದರ್ಶನ

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

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್ ಪ್ರಕಾರ ವಿವರಣೆ
show.bs.popover showನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ.bs.popover ಬಳಕೆದಾರರಿಗೆ ಪಾಪೋವರ್ ಗೋಚರಿಸುವಂತೆ ಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hide.bs.popover hideನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಗುಪ್ತ.ಬಿಎಸ್.ಪೋಪೋವರ್ ಬಳಕೆದಾರರಿಂದ ಪಾಪ್ಓವರ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
inserted.bs.popover show.bs.popoverDOM ಗೆ ಪಾಪೋವರ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಸೇರಿಸಿದಾಗ ಈವೆಂಟ್ ನಂತರ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ .
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})