ಸಾಧನಸಲಹೆಗಳು
ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು ಡೇಟಾ-ಬಿಎಸ್-ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ 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 ಒಳಗಿನ ಅಂಶಕ್ಕೆ ಧನ್ಯವಾದಗಳು ಟೂಲ್ಟಿಪ್ಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.
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
ಗುಣಲಕ್ಷಣವಾಗಿದೆ ಮತ್ತು title
HTML ಅಂಶದಲ್ಲಿ ನೀವು ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೊಂದಲು ಬಯಸುತ್ತೀರಿ. ಟೂಲ್ಟಿಪ್ನ ರಚಿತವಾದ ಮಾರ್ಕ್ಅಪ್ ಸರಳವಾಗಿದೆ, ಆದರೂ ಅದಕ್ಕೆ ಸ್ಥಾನದ ಅಗತ್ಯವಿರುತ್ತದೆ (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, 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 |
ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಉದಾಹರಣೆ: |
delay |
ಸಂಖ್ಯೆ | ವಸ್ತು | 0 |
ಟೂಲ್ಟಿಪ್ (ಎಂಎಸ್) ತೋರಿಸುವುದು ಮತ್ತು ಮರೆಮಾಡುವುದು ವಿಳಂಬ - ಹಸ್ತಚಾಲಿತ ಪ್ರಚೋದಕ ಪ್ರಕಾರಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ: |
html |
ಬೂಲಿಯನ್ | false |
ಟೂಲ್ಟಿಪ್ನಲ್ಲಿ HTML ಅನ್ನು ಅನುಮತಿಸಿ. ನಿಜವಾಗಿದ್ದರೆ, ಟೂಲ್ಟಿಪ್ನಲ್ಲಿನ HTML ಟ್ಯಾಗ್ಗಳನ್ನು ಟೂಲ್ಟಿಪ್ನಲ್ಲಿ ನೀವು XSS ದಾಳಿಗಳ ಬಗ್ಗೆ ಚಿಂತೆ ಮಾಡುತ್ತಿದ್ದರೆ ಪಠ್ಯವನ್ನು ಬಳಸಿ. |
placement |
ದಾರ | ಕಾರ್ಯ | 'top' |
ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಸ್ವಯಂ | ಮೇಲ್ಭಾಗ | ಕೆಳಗೆ | ಬಿಟ್ಟು | ಬಲ. ನಿರ್ದಿಷ್ಟಪಡಿಸಿದಾಗ, ಇದು ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮರುಹೊಂದಿಸುತ್ತದೆ ನಿಯೋಜನೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಟೂಲ್ಟಿಪ್ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಅದರ ಎರಡನೆಯದಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ. |
selector |
ದಾರ | ಸುಳ್ಳು | false |
ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ಟೂಲ್ಟಿಪ್ ಆಬ್ಜೆಕ್ಟ್ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುರಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ. jQuery.on ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸೇರಿಸಲಾದ DOM ಅಂಶಗಳಿಗೆ ( ಬೆಂಬಲ) ಟೂಲ್ಟಿಪ್ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ . ಇದನ್ನು ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ . |
template |
ಸ್ಟ್ರಿಂಗ್ | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ಟೂಲ್ಟಿಪ್ ರಚಿಸುವಾಗ ಬಳಸಲು ಬೇಸ್ HTML. ಟೂಲ್ಟಿಪ್ಗಳನ್ನು
ಹೊರಗಿನ ಹೊದಿಕೆ ಅಂಶವು |
title |
ದಾರ | ಅಂಶ | ಕಾರ್ಯ | '' |
ಒಂದು ಕಾರ್ಯವನ್ನು ನೀಡಿದರೆ, ಅದನ್ನು |
trigger |
ಸ್ಟ್ರಿಂಗ್ | 'hover focus' |
ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸಲಾಗಿದೆ - ಕ್ಲಿಕ್ ಮಾಡಿ | ಸುಳಿದಾಡಿ | ಗಮನ | ಕೈಪಿಡಿ. ನೀವು ಬಹು ಪ್ರಚೋದಕಗಳನ್ನು ರವಾನಿಸಬಹುದು; ಅವುಗಳನ್ನು ಜಾಗದಿಂದ ಪ್ರತ್ಯೇಕಿಸಿ.
|
fallbackPlacements |
ಶ್ರೇಣಿ | ['top', 'right', 'bottom', 'left'] |
ಶ್ರೇಣಿಯಲ್ಲಿರುವ ನಿಯೋಜನೆಗಳ ಪಟ್ಟಿಯನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಫಾಲ್ಬ್ಯಾಕ್ ಪ್ಲೇಸ್ಮೆಂಟ್ಗಳನ್ನು ವಿವರಿಸಿ (ಆದ್ಯತೆಯ ಕ್ರಮದಲ್ಲಿ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ನಡವಳಿಕೆ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ |
boundary |
ದಾರ | ಅಂಶ | 'clippingParents' |
ಟೂಲ್ಟಿಪ್ನ ಓವರ್ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ (ಪಾಪರ್ನ ಪ್ರಿವೆಂಟ್ಓವರ್ಫ್ಲೋ ಮಾರ್ಪಾಡುಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ). ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಇದು 'clippingParents' HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖವನ್ನು ಸ್ವೀಕರಿಸಬಹುದು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಡಿಟೆಕ್ಟ್ಓವರ್ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
customClass |
ದಾರ | ಕಾರ್ಯ | '' |
ಅದನ್ನು ತೋರಿಸಿದಾಗ ಟೂಲ್ಟಿಪ್ಗೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ. ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಯಾವುದೇ ತರಗತಿಗಳಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಈ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬಹು ವರ್ಗಗಳನ್ನು ಸೇರಿಸಲು, ಅವುಗಳನ್ನು ಸ್ಪೇಸ್ಗಳೊಂದಿಗೆ ಪ್ರತ್ಯೇಕಿಸಿ: ಹೆಚ್ಚುವರಿ ವರ್ಗದ ಹೆಸರುಗಳನ್ನು ಹೊಂದಿರುವ ಒಂದೇ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ ಕಾರ್ಯವನ್ನು ಸಹ ನೀವು ರವಾನಿಸಬಹುದು. |
sanitize |
ಬೂಲಿಯನ್ | true |
ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ. ಸಕ್ರಿಯಗೊಳಿಸಿದರೆ 'template' ಮತ್ತು 'title' ಆಯ್ಕೆಗಳನ್ನು ಸ್ಯಾನಿಟೈಸ್ ಮಾಡಲಾಗುತ್ತದೆ. ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ಸ್ಯಾನಿಟೈಸರ್ ವಿಭಾಗವನ್ನು ನೋಡಿ . |
allowList |
ವಸ್ತು | ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ | ಅನುಮತಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಟ್ಯಾಗ್ಗಳನ್ನು ಹೊಂದಿರುವ ವಸ್ತು |
sanitizeFn |
ಶೂನ್ಯ | ಕಾರ್ಯ | null |
ಇಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಯಾನಿಟೈಜ್ ಕಾರ್ಯವನ್ನು ಪೂರೈಸಬಹುದು. ನೈರ್ಮಲ್ಯೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಮೀಸಲಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. |
offset |
ವ್ಯೂಹ | ದಾರ | ಕಾರ್ಯ | [0, 0] |
ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಟೂಲ್ಟಿಪ್ನ ಆಫ್ಸೆಟ್. ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ನೀವು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ರವಾನಿಸಬಹುದು: ಆಫ್ಸೆಟ್ ಅನ್ನು ನಿರ್ಧರಿಸಲು ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿದಾಗ, ಪಾಪ್ಪರ್ ಪ್ಲೇಸ್ಮೆಂಟ್, ರೆಫರೆನ್ಸ್ ಮತ್ತು ಪಾಪ್ಪರ್ ರೆಕ್ಟ್ಗಳನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಲಾಗಿದೆ. ಕಾರ್ಯವು ಎರಡು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಸರಣಿಯನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು: . ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಆಫ್ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
popperConfig |
ಶೂನ್ಯ | ವಸ್ತು | ಕಾರ್ಯ | null |
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಪಾಪ್ಪರ್ನ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೋಡಿ . ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ರಚಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಸ್ವಂತ ಕಾನ್ಫಿಗರೇಶನ್ನೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಬಳಸಲು ಮತ್ತು ವಿಲೀನಗೊಳಿಸಲು ಇದು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಕಾರ್ಯವು ಪಾಪ್ಪರ್ಗಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು. |
ವೈಯಕ್ತಿಕ ಟೂಲ್ಟಿಪ್ಗಳಿಗಾಗಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು
ಮೇಲೆ ವಿವರಿಸಿದಂತೆ ವೈಯಕ್ತಿಕ ಟೂಲ್ಟಿಪ್ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.
ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದುpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ವಿಧಾನಗಳು
ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .
ತೋರಿಸು
ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಟೂಲ್ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . shown.bs.tooltip
ಇದನ್ನು ಟೂಲ್ಟಿಪ್ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಶೂನ್ಯ-ಉದ್ದದ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಟೂಲ್ಟಿಪ್ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.
tooltip.show()
ಮರೆಮಾಡಿ
ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಟೂಲ್ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . hidden.bs.tooltip
ಇದನ್ನು ಟೂಲ್ಟಿಪ್ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
tooltip.hide()
ಟಾಗಲ್
ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಟೂಲ್ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . ಇದನ್ನು ಟೂಲ್ಟಿಪ್ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.shown.bs.tooltip
hidden.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()