ಸಾಧನಸಲಹೆಗಳು

ಅವಲೋಕನ

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

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

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

ಉದಾಹರಣೆಗಳು

ಸಾಧನಸಲಹೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

ಲಿಂಕ್‌ಗಳಲ್ಲಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

ಕಸ್ಟಮ್ ಟೂಲ್ಟಿಪ್ಸ್

ನೀವು CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಟೂಲ್‌ಟಿಪ್‌ಗಳ ನೋಟವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು . data-bs-custom-class="custom-tooltip"ನಮ್ಮ ಕಸ್ಟಮ್ ನೋಟವನ್ನು ಸ್ಕೋಪ್ ಮಾಡಲು ನಾವು ಕಸ್ಟಮ್ ವರ್ಗವನ್ನು ಹೊಂದಿಸಿದ್ದೇವೆ ಮತ್ತು ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸಲು ಅದನ್ನು ಬಳಸುತ್ತೇವೆ.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

ನಿರ್ದೇಶನಗಳು

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

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

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

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

SVG ಯೊಂದಿಗೆ:

CSS

ಅಸ್ಥಿರ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ CSS ಅಸ್ಥಿರ ವಿಧಾನದ ಭಾಗವಾಗಿ, .tooltipವರ್ಧಿತ ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಈಗ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು Sass ಮೂಲಕ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ Sass ಗ್ರಾಹಕೀಕರಣವು ಇನ್ನೂ ಬೆಂಬಲಿತವಾಗಿದೆ.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

ಸಾಸ್ ಅಸ್ಥಿರ

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

ಬಳಕೆ

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

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

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

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

ಮಾರ್ಕ್ಅಪ್

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ಆಯ್ಕೆಗಳು

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5.2.0 ರಂತೆ, ಎಲ್ಲಾ ಘಟಕಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಕಾಯ್ದಿರಿಸಿದ ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ data-bs-configಅದು JSON ಸ್ಟ್ರಿಂಗ್‌ನಂತೆ ಸರಳ ಘಟಕ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಇರಿಸಬಹುದು. ಒಂದು ಅಂಶವು data-bs-config='{"delay":0, "title":123}'ಮತ್ತು data-bs-title="456"ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವಾಗ, ಅಂತಿಮ titleಮೌಲ್ಯವಾಗಿರುತ್ತದೆ 456ಮತ್ತು ಪ್ರತ್ಯೇಕ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಲ್ಲಿ ನೀಡಲಾದ ಮೌಲ್ಯಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ data-bs-config. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಂತಹ JSON ಮೌಲ್ಯಗಳನ್ನು ಇರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ data-bs-delay='{"show":0,"hide":150}'.

Using function with popperConfig

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

Methods

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Events

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()