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

ಸಾಧನಸಲಹೆಗಳು

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

ಈ ಪುಟದಲ್ಲಿ

ಅವಲೋಕನ

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

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

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

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ಉದಾಹರಣೆಗಳು

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

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

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

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

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

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

SVG ಯೊಂದಿಗೆ:

ಸಾಸ್

ಅಸ್ಥಿರ

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

ಬಳಕೆ

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ಓವರ್ಫ್ಲೋ autoಮತ್ತುscroll

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

ಮಾರ್ಕ್ಅಪ್

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

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

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

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ಆಯ್ಕೆಗಳು

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ಆಫ್‌ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
popperConfig ಶೂನ್ಯ | ವಸ್ತು | ಕಾರ್ಯ null

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

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

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

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

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

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

ವಿಧಾನಗಳು

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

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

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

ತೋರಿಸು

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

tooltip.show()

ಮರೆಮಾಡಿ

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

tooltip.hide()

ಟಾಗಲ್

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

tooltip.toggle()

ವಿಲೇವಾರಿ ಮಾಡು

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

tooltip.dispose()

ಸಕ್ರಿಯಗೊಳಿಸಿ

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

tooltip.enable()

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸು

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

tooltip.disable()

toggleEnabled

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

tooltip.toggleEnabled()

ನವೀಕರಿಸಿ

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

tooltip.update()

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

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

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

DOM ಅಂಶದೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಟೂಲ್‌ಟಿಪ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ, ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಿ

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

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

ಈವೆಂಟ್ ಪ್ರಕಾರ ವಿವರಣೆ
show.bs.tooltip showನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
shown.bs.tooltip ಟೂಲ್‌ಟಿಪ್ ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hide.bs.tooltip hideನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
hidden.bs.tooltip ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಬಳಕೆದಾರರಿಂದ ಮರೆಮಾಡುವುದನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
inserted.bs.tooltip show.bs.tooltipಟೂಲ್‌ಟಿಪ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು DOM ಗೆ ಸೇರಿಸಿದಾಗ ಈವೆಂಟ್‌ನ ನಂತರ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ . 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()