Source

ಸಾಧನಸಲಹೆಗಳು

ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಡೇಟಾ-ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ CSS3 ಬಳಸಿಕೊಂಡು CSS ಮತ್ತು JavaScript ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸೇರಿಸಲು ದಾಖಲಾತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳು.

ಅವಲೋಕನ

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

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

ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು prefers-reduced-motionಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ .

ಇದೆಲ್ಲ ಸಿಕ್ಕಿತೇ? ಅದ್ಭುತವಾಗಿದೆ, ಕೆಲವು ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಅವರು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನೋಡೋಣ.

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

data-toggleಪುಟದಲ್ಲಿ ಎಲ್ಲಾ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ಒಂದು ಮಾರ್ಗವೆಂದರೆ ಅವುಗಳ ಗುಣಲಕ್ಷಣದ ಮೂಲಕ ಅವುಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು :

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ಉದಾಹರಣೆಗಳು

ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಸುಳಿದಾಡಿ:

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

ನಾಲ್ಕು ಟೂಲ್‌ಟಿಪ್‌ಗಳ ದಿಕ್ಕುಗಳನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಬಟನ್‌ಗಳ ಮೇಲೆ ಸುಳಿದಾಡಿ: ಮೇಲ್ಭಾಗ, ಬಲ, ಕೆಳಗೆ ಮತ್ತು ಎಡ.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

ಮತ್ತು ಕಸ್ಟಮ್ HTML ಜೊತೆಗೆ ಸೇರಿಸಲಾಗಿದೆ:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

ಬಳಕೆ

ಟೂಲ್‌ಟಿಪ್ ಪ್ಲಗಿನ್ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ವಿಷಯ ಮತ್ತು ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ ಮತ್ತು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಅವುಗಳ ಪ್ರಚೋದಕ ಅಂಶದ ನಂತರ ಇರಿಸುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟ್ರಿಗರ್ ಮಾಡಿ:

$('#example').tooltip(options)
ಓವರ್ಫ್ಲೋ autoಮತ್ತುscroll

overflow: autoಮೂಲ ಧಾರಕವು ನಮ್ಮ ನ್ನು ಹೊಂದಿರುವಾಗ ಅಥವಾ overflow: scrollಇಷ್ಟಪಟ್ಟಾಗ ಟೂಲ್‌ಟಿಪ್ ಸ್ಥಾನವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬದಲಾಗಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ .table-responsive, ಆದರೆ ಮೂಲ ನಿಯೋಜನೆಯ ಸ್ಥಾನವನ್ನು ಇನ್ನೂ ಇರಿಸುತ್ತದೆ. ಪರಿಹರಿಸಲು, boundaryಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಹೊರತುಪಡಿಸಿ ಯಾವುದಕ್ಕೂ ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿಸಿ 'scrollParent', ಉದಾಹರಣೆಗೆ 'window':

$('#example').tooltip({ boundary: 'window' })

ಮಾರ್ಕ್ಅಪ್

ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್‌ಅಪ್ ಕೇವಲ dataಗುಣಲಕ್ಷಣವಾಗಿದೆ ಮತ್ತು titleHTML ಅಂಶದಲ್ಲಿ ನೀವು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಹೊಂದಲು ಬಯಸುತ್ತೀರಿ. ಟೂಲ್‌ಟಿಪ್‌ನ ರಚಿತವಾದ ಮಾರ್ಕ್‌ಅಪ್ ಸರಳವಾಗಿದೆ, ಆದರೂ ಅದಕ್ಕೆ ಸ್ಥಾನದ ಅಗತ್ಯವಿರುತ್ತದೆ (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, topಪ್ಲಗಿನ್‌ನಿಂದ ಹೊಂದಿಸಲಾಗಿದೆ).

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

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಅಂಶಗಳು

ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳು disabledಸಂವಾದಾತ್ಮಕವಾಗಿರುವುದಿಲ್ಲ, ಅಂದರೆ ಬಳಕೆದಾರರು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು (ಅಥವಾ ಪಾಪೋವರ್) ಟ್ರಿಗ್ಗರ್ ಮಾಡಲು ಫೋಕಸ್ ಮಾಡಲು, ಹೋವರ್ ಮಾಡಲು ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಪರಿಹಾರೋಪಾಯವಾಗಿ, ನೀವು ರ್ಯಾಪರ್‌ನಿಂದ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು ಬಯಸುತ್ತೀರಿ <div>ಅಥವಾ <span>, ಆದರ್ಶಪ್ರಾಯವಾಗಿ ಕೀಬೋರ್ಡ್-ಫೋಕಬಲ್ ಬಳಸಿ , ಮತ್ತು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಅಂಶವನ್ನು tabindex="0"ಅತಿಕ್ರಮಿಸಲು .pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

ಆಯ್ಕೆಗಳು

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

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

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

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

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

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

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

ಟೂಲ್‌ಟಿಪ್‌ನಲ್ಲಿ HTML ಅನ್ನು ಅನುಮತಿಸಿ.

ನಿಜವಾಗಿದ್ದರೆ, ಟೂಲ್‌ಟಿಪ್‌ನಲ್ಲಿನ HTML ಟ್ಯಾಗ್‌ಗಳನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನಲ್ಲಿ titleಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ತಪ್ಪಾಗಿದ್ದರೆ, textDOM ಗೆ ವಿಷಯವನ್ನು ಸೇರಿಸಲು jQuery ನ ವಿಧಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ನೀವು XSS ದಾಳಿಗಳ ಬಗ್ಗೆ ಚಿಂತೆ ಮಾಡುತ್ತಿದ್ದರೆ ಪಠ್ಯವನ್ನು ಬಳಸಿ.
ನಿಯೋಜನೆ ದಾರ | ಕಾರ್ಯ 'ಟಾಪ್'

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

ನಿಯೋಜನೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಟೂಲ್‌ಟಿಪ್ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಎರಡನೆಯದಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ. thisಸಂದರ್ಭವನ್ನು ಟೂಲ್‌ಟಿಪ್ ನಿದರ್ಶನಕ್ಕೆ ಹೊಂದಿಸಲಾಗಿದೆ .
ಆಯ್ಕೆಗಾರ ದಾರ | ಸುಳ್ಳು ಸುಳ್ಳು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ಟೂಲ್‌ಟಿಪ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುರಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ. jQuery.onಪ್ರಾಯೋಗಿಕವಾಗಿ, ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸೇರಿಸಲಾದ DOM ಅಂಶಗಳಿಗೆ ( ಬೆಂಬಲ) ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ . ಇದನ್ನು ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ .
ಟೆಂಪ್ಲೇಟ್ ಸ್ಟ್ರಿಂಗ್ '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

ಟೂಲ್‌ಟಿಪ್ ರಚಿಸುವಾಗ ಬಳಸಲು ಬೇಸ್ HTML.

ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು titleಗೆ ಚುಚ್ಚಲಾಗುತ್ತದೆ .tooltip-inner.

.arrowಟೂಲ್‌ಟಿಪ್‌ನ ಬಾಣವಾಗುತ್ತದೆ.

ಹೊರಗಿನ ಹೊದಿಕೆ ಅಂಶವು .tooltipವರ್ಗವನ್ನು ಹೊಂದಿರಬೇಕು ಮತ್ತು role="tooltip".
ಶೀರ್ಷಿಕೆ ದಾರ | ಅಂಶ | ಕಾರ್ಯ ''

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

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

ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸಲಾಗಿದೆ - ಕ್ಲಿಕ್ ಮಾಡಿ | ಸುಳಿದಾಡಿ | ಗಮನ | ಕೈಪಿಡಿ. ನೀವು ಬಹು ಪ್ರಚೋದಕಗಳನ್ನು ರವಾನಿಸಬಹುದು; ಅವುಗಳನ್ನು ಜಾಗದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ.

'manual'.tooltip('show'), .tooltip('hide')ಮತ್ತು .tooltip('toggle')ವಿಧಾನಗಳ ಮೂಲಕ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಪ್ರಚೋದಿಸಲಾಗುವುದು ಎಂದು ಸೂಚಿಸುತ್ತದೆ ; ಈ ಮೌಲ್ಯವನ್ನು ಬೇರೆ ಯಾವುದೇ ಪ್ರಚೋದಕದೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗುವುದಿಲ್ಲ.

'hover'ಕೀಬೋರ್ಡ್ ಮೂಲಕ ಟ್ರಿಗರ್ ಮಾಡಲಾಗದ ಟೂಲ್‌ಟಿಪ್‌ಗಳಿಗೆ ತನ್ನದೇ ಆದ ಕಾರಣವಾಗುತ್ತದೆ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಅದೇ ಮಾಹಿತಿಯನ್ನು ರವಾನಿಸಲು ಪರ್ಯಾಯ ವಿಧಾನಗಳು ಇದ್ದಲ್ಲಿ ಮಾತ್ರ ಬಳಸಬೇಕು.
ಆಫ್ಸೆಟ್ ಸಂಖ್ಯೆ | ದಾರ | ಕಾರ್ಯ 0

ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಟೂಲ್‌ಟಿಪ್‌ನ ಆಫ್‌ಸೆಟ್.

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

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ಆಫ್‌ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
ಫಾಲ್ಬ್ಯಾಕ್ ಪ್ಲೇಸ್ಮೆಂಟ್ ದಾರ | ಶ್ರೇಣಿ 'ಫ್ಲಿಪ್' ಫಾಲ್‌ಬ್ಯಾಕ್‌ನಲ್ಲಿ ಪಾಪ್ಪರ್ ಯಾವ ಸ್ಥಾನವನ್ನು ಬಳಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸಿ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ನಡವಳಿಕೆ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ
ಗಡಿ ದಾರ | ಅಂಶ 'ಸ್ಕ್ರೋಲ್ ಪೇರೆಂಟ್' ಟೂಲ್‌ಟಿಪ್‌ನ ಓವರ್‌ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ. 'viewport', 'window', 'scrollParent', ಅಥವಾ HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ತಡೆಗಟ್ಟುವ ಓವರ್‌ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
ಶುಚಿಗೊಳಿಸು ಬೂಲಿಯನ್ ನಿಜ ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ. ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ 'template'ಮತ್ತು 'title'ಆಯ್ಕೆಗಳನ್ನು ಸ್ಯಾನಿಟೈಸ್ ಮಾಡಲಾಗುತ್ತದೆ.
ಬಿಳಿಪಟ್ಟಿ ವಸ್ತು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ ಅನುಮತಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ವಸ್ತು
ಸ್ಯಾನಿಟೈಜ್ಎಫ್ಎನ್ ಶೂನ್ಯ | ಕಾರ್ಯ ಶೂನ್ಯ ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಯಾನಿಟೈಜ್ ಕಾರ್ಯವನ್ನು ಪೂರೈಸಬಹುದು. ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಮೀಸಲಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗ್ ಶೂನ್ಯ | ವಸ್ತು ಶೂನ್ಯ Bootstrap ನ ಡೀಫಾಲ್ಟ್ Popper.js ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, Popper.js ನ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೋಡಿ

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

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

ವಿಧಾನಗಳು

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

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

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

$().tooltip(options)

ಎಲಿಮೆಂಟ್ ಸಂಗ್ರಹಕ್ಕೆ ಟೂಲ್‌ಟಿಪ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ.

.tooltip('show')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . shown.bs.tooltipಇದನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಶೂನ್ಯ-ಉದ್ದದ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.

$('#element').tooltip('show')

.tooltip('hide')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . hidden.bs.tooltipಇದನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

$('#element').tooltip('hide')

.tooltip('toggle')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . ಇದನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

.tooltip('dispose')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ನಾಶಪಡಿಸುತ್ತದೆ. ನಿಯೋಗವನ್ನು ಬಳಸುವ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ( ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡುselector ರಚಿಸಲಾಗಿದೆ ) ವಂಶಸ್ಥ ಪ್ರಚೋದಕ ಅಂಶಗಳ ಮೇಲೆ ಪ್ರತ್ಯೇಕವಾಗಿ ನಾಶಪಡಿಸಲಾಗುವುದಿಲ್ಲ.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ತೋರಿಸಲು ಸಾಮರ್ಥ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರು-ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ ಮಾತ್ರ ಅದನ್ನು ತೋರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

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

ಈವೆಂಟ್ ಪ್ರಕಾರ ವಿವರಣೆ
show.bs.ಟೂಲ್ಟಿಪ್ showನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ.bs.ಟೂಲ್ಟಿಪ್ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hide.bs.ಟೂಲ್ಟಿಪ್ hideನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಹಿಡನ್.ಬಿಎಸ್.ಟೂಲ್ಟಿಪ್ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಬಳಕೆದಾರರಿಂದ ಮರೆಮಾಡುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
inserted.bs.tooltip show.bs.tooltipಟೂಲ್‌ಟಿಪ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು DOM ಗೆ ಸೇರಿಸಿದಾಗ ಈವೆಂಟ್‌ನ ನಂತರ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ . 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})