Source

ಪಾಪೋವರ್ಸ್

ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿನ ಯಾವುದೇ ಅಂಶಕ್ಕೆ 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)

ಆಯ್ಕೆಗಳು

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

ಹೆಸರು ಮಾದರಿ ಡೀಫಾಲ್ಟ್ ವಿವರಣೆ
ಅನಿಮೇಷನ್ ಬೂಲಿಯನ್ ನಿಜ ಪಾಪೋವರ್‌ಗೆ CSS ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ಕಂಟೇನರ್ ದಾರ | ಅಂಶ | ಸುಳ್ಳು ಸುಳ್ಳು

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

ವಿಷಯ ದಾರ | ಅಂಶ | ಕಾರ್ಯ ''

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

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

ವಿಳಂಬ ಸಂಖ್ಯೆ | ವಸ್ತು 0

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

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

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

html ಬೂಲಿಯನ್ ಸುಳ್ಳು ಪಾಪೋವರ್‌ಗೆ HTML ಅನ್ನು ಸೇರಿಸಿ. ತಪ್ಪಾಗಿದ್ದರೆ, textDOM ಗೆ ವಿಷಯವನ್ನು ಸೇರಿಸಲು 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 ನ ತಡೆಗಟ್ಟುವ ಓವರ್‌ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .

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

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

ವಿಧಾನಗಳು

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

ಎಲ್ಲಾ 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.popoverDOM ಗೆ ಪಾಪೋವರ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಸೇರಿಸಿದಾಗ ಈವೆಂಟ್ ನಂತರ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ .
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})