ಪಾಪೋವರ್ಸ್

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

ಅವಲೋಕನ

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

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

ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು 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>

ಬಳಕೆ

JavaScript ಮೂಲಕ popovers ಸಕ್ರಿಯಗೊಳಿಸಿ:

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

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

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

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

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-animation="".

ಭದ್ರತಾ ಕಾರಣಗಳಿಗಾಗಿ sanitize, sanitizeFnಮತ್ತು whiteListಆಯ್ಕೆಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪೂರೈಸಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

ಹೆಸರು	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
ಅನಿಮೇಷನ್	ಬೂಲಿಯನ್	ನಿಜ	ಪಾಪೋವರ್‌ಗೆ CSS ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ಕಂಟೇನರ್	ದಾರ \| ಅಂಶ \| ಸುಳ್ಳು	ಸುಳ್ಳು	ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಪಾಪೋವರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಉದಾಹರಣೆ: `container: 'body'`. ಈ ಆಯ್ಕೆಯು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದ್ದು, ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಹರಿವಿನಲ್ಲಿ ಪ್ರಚೋದಕ ಅಂಶದ ಬಳಿ ಪಾಪೋವರ್ ಅನ್ನು ಇರಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ - ಇದು ವಿಂಡೋ ಮರುಗಾತ್ರದ ಸಮಯದಲ್ಲಿ ಪ್ರಚೋದಕ ಅಂಶದಿಂದ ದೂರ ತೇಲುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
ವಿಷಯ	ದಾರ \| ಅಂಶ \| ಕಾರ್ಯ	''	`data-content`ಗುಣಲಕ್ಷಣವು ಇಲ್ಲದಿದ್ದರೆ ಡಿಫಾಲ್ಟ್ ವಿಷಯ ಮೌಲ್ಯ . ಒಂದು ಕಾರ್ಯವನ್ನು ನೀಡಿದರೆ, `this`ಪಾಪೋವರ್ ಲಗತ್ತಿಸಲಾದ ಅಂಶಕ್ಕೆ ಅದರ ಉಲ್ಲೇಖದೊಂದಿಗೆ ಅದನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ.
ವಿಳಂಬ	ಸಂಖ್ಯೆ \| ವಸ್ತು	0	popover (ms) ಅನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ವಿಳಂಬ - ಹಸ್ತಚಾಲಿತ ಪ್ರಚೋದಕ ಪ್ರಕಾರಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ:`delay: { "show": 500, "hide": 100 }`
html	ಬೂಲಿಯನ್	ಸುಳ್ಳು	ಪಾಪೋವರ್‌ಗೆ HTML ಅನ್ನು ಸೇರಿಸಿ. ತಪ್ಪಾಗಿದ್ದರೆ, `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`ಯಾವುದೇ ಇತರ ಪ್ರಚೋದಕಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ.
ಆಫ್ಸೆಟ್	ಸಂಖ್ಯೆ \| ಸ್ಟ್ರಿಂಗ್	0	ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪಾಪೋವರ್‌ನ ಆಫ್‌ಸೆಟ್. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ಆಫ್‌ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
ಫಾಲ್ಬ್ಯಾಕ್ ಪ್ಲೇಸ್ಮೆಂಟ್	ದಾರ \| ಶ್ರೇಣಿ	'ಫ್ಲಿಪ್'	ಫಾಲ್‌ಬ್ಯಾಕ್‌ನಲ್ಲಿ ಪಾಪ್ಪರ್ ಯಾವ ಸ್ಥಾನವನ್ನು ಬಳಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸಿ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ನಡವಳಿಕೆ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ
ಗಡಿ	ದಾರ \| ಅಂಶ	'ಸ್ಕ್ರೋಲ್ ಪೇರೆಂಟ್'	ಪಾಪೋವರ್‌ನ ಓವರ್‌ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ. `'viewport'`, `'window'`, `'scrollParent'`, ಅಥವಾ HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ತಡೆಗಟ್ಟುವ ಓವರ್‌ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
ಶುಚಿಗೊಳಿಸು	ಬೂಲಿಯನ್	ನಿಜ	ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ. ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ `'template'`, `'content'`ಮತ್ತು `'title'`ಆಯ್ಕೆಗಳನ್ನು ಸ್ಯಾನಿಟೈಸ್ ಮಾಡಲಾಗುತ್ತದೆ.
ಬಿಳಿಪಟ್ಟಿ	ವಸ್ತು	ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ	ಅನುಮತಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ವಸ್ತು
ಸ್ಯಾನಿಟೈಜ್ಎಫ್ಎನ್	ಶೂನ್ಯ \| ಕಾರ್ಯ	ಶೂನ್ಯ	ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಯಾನಿಟೈಜ್ ಕಾರ್ಯವನ್ನು ಪೂರೈಸಬಹುದು. ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಮೀಸಲಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗ್	ಶೂನ್ಯ \| ವಸ್ತು	ಶೂನ್ಯ	Bootstrap ನ ಡೀಫಾಲ್ಟ್ Popper.js ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, Popper.js ನ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೋಡಿ

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

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

ವಿಧಾನಗಳು

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

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

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

`$().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	`show`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ.bs.popover	ಬಳಕೆದಾರರಿಗೆ ಪಾಪೋವರ್ ಗೋಚರಿಸುವಂತೆ ಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hide.bs.popover	`hide`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಗುಪ್ತ.ಬಿಎಸ್.ಪೋಪೋವರ್	ಬಳಕೆದಾರರಿಂದ ಪಾಪ್ಓವರ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
inserted.bs.popover	`show.bs.popover`DOM ಗೆ ಪಾಪೋವರ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಸೇರಿಸಿದಾಗ ಈವೆಂಟ್ ನಂತರ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ .

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})