قورال قوراللىرى
CSS ۋە JavaScript ئارقىلىق خاسلاشتۇرۇلغان Bootstrap قورال قوراللىرىنى CSS3 ئارقىلىق كارتون ۋە يەرلىك ماۋزۇ ساقلاشقا ئىشلىتىدىغان سانلىق مەلۇمات- bs- خاسلىقلارنى قوشۇشنىڭ ھۆججەتلىرى ۋە مىساللىرى.
ئومۇمىي چۈشەنچە
قورال قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:
- قورال قوراللىرى ئورۇن بەلگىلەش ئۈچۈن 3-تەرەپ كۈتۈپخانىسى Popper غا تايىنىدۇ . Bootstrap.js دىن بۇرۇن popper.min.js نى ئۆز ئىچىگە ئېلىشىڭىز ياكى قورال قوراللىرىنىڭ ئىشلىشى ئۈچۈن Popper نى ئىشلىتىڭ
bootstrap.bundle.min.js
/ ئىشلىتىڭ.bootstrap.bundle.js
- قورال قوراللىرى ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۆزىڭىز باشلىشىڭىز كېرەك .
- نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.
- تېخىمۇ مۇرەككەپ زاپچاسلاردا مەسىلە پەيدا قىلىشتىن ساقلىنىشنى بەلگىلەڭ
container: 'body'
(بىزنىڭ كىرگۈزۈش گۇرۇپپىلىرىمىز ، كۇنۇپكا گۇرۇپپىلىرىمىز دېگەندەك). - يوشۇرۇن ئېلېمېنتلارنى قوزغىتىش قوراللىرى ئىشلىمەيدۇ.
- قورال
.disabled
ياكىdisabled
ئېلېمېنتلار چوقۇم ئورالغان ئېلېمېنتتا قوزغىتىلىشى كېرەك. - كۆپ قۇرنى ئۆز ئىچىگە ئالغان ئۇلىنىشتىن قوزغالغاندا ، قورال كۆرسەتمىلىرى مەركەزلىك بولىدۇ. بۇ ھەرىكەتتىن ساقلىنىش ئۈچۈن s
white-space: nowrap;
نى ئىشلىتىڭ .<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 دا Bootstrap نى ئىشلەتكەندە يۆنىلىش ئەينەك قىلىنغان.
<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 بىلەن:
Sass
ئۆزگەرگۈچى مىقدار
$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;
ئىشلىتىش
قورال قورال قىستۇرمىسى ئېھتىياجغا ئاساسەن مەزمۇن ۋە بەلگە ھاسىل قىلىدۇ ، سۈكۈتتىكى ھالەتتە قوزغىتىش قوراللىرى قوزغاتقۇچ ئېلېمېنتىدىن كېيىن.
قورال قورالنى JavaScript ئارقىلىق قوزغىتىڭ:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ئېشىپ كېتىش auto
ۋەscroll
قورال قاچىسى ئورنى ئاتا- ئانىلار قاچىسىoverflow: auto
بىزدە ياكى overflow: scroll
بىزگە ئوخشاش بولغاندا ئاپتوماتىك ئۆزگەرتىشكە ئۇرۇنىدۇ .table-responsive
، ئەمما يەنىلا ئەسلىدىكى ئورۇننىڭ ئورنىنى ساقلايدۇ. بۇنى ھەل قىلىش ئۈچۈن ، ھەر قانداق HTMLElement غا boundary
تاللاشنى تاللاڭ (تاللانما ئارقىلىق flip ئۆزگەرتكۈچ ئۈچۈن popperConfig
) ، كۆڭۈلدىكى قىممەتنى قاپلىۋېتىڭ 'clippingParents'
، مەسىلەن document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup
قورال كۆرسەتكۈچىگە لازىملىق بەلگە پەقەت بىر data
خاسلىق title
بولۇپ ، HTML ئېلېمېنتىدا قورال قوراللىرى بولۇشنى خالايسىز. قورال قورالنىڭ ھاسىل قىلىنغان بەلگىسى بىر قەدەر ئاددىي ، گەرچە ئۇ ئورۇن تەلەپ قىلسىمۇ (سۈكۈتتىكى ھالەتتە top
قىستۇرما تەرىپىدىن بەلگىلىنىدۇ).
قورال قوراللىرىنى ياساش كۇنۇپكا تاختىسى ۋە ياردەمچى تېخنىكا ئىشلەتكۈچىلەر ئۈچۈن خىزمەت قىلىدۇ
سىز پەقەت HTML ئېلېمېنتلىرىغا ئەنئەنىۋى كۇنۇپكا تاختىسى فوكۇسلانغان ۋە ئۆز-ئارا تەسىر كۆرسىتىدىغان (ئۇلىنىش ياكى شەكىل كونترول دېگەندەك) قورال قوراللىرىنى قوشۇشىڭىز كېرەك. خاسلىقنى قوشۇش ئارقىلىق خالىغان HTML ئېلېمېنتلىرى (مەسىلەن <span>
) نى فوكۇس توغرىلىغىلى بولسىمۇ 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>
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-bs-
ئوخشاش data-bs-animation=""
. سانلىق مەلۇمات خاسلىقى ئارقىلىق تاللانمىلارنى يوللىغاندا ، تاللاش نامىنىڭ دېلو تۈرىنى camelCase دىن kebab-case غا ئۆزگەرتىڭ. مەسىلەن ، ئىشلىتىشنىڭ ئورنىغا data-bs-customClass="beautifier"
، ئىشلىتىش data-bs-custom-class="beautifier"
.
sanitize
،
sanitizeFn
ۋە
allowList
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى بىلەن تەمىنلىگىلى بولمايدۇ.
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
animation |
boolean | true |
قورال قورالغا CSS سۇس ئۆتۈشنى ئىشلىتىڭ |
container |
string | element | false | false |
قورال كۆرسەتكۈچىنى مەلۇم ئېلېمېنتقا قوشىدۇ. مىسال : |
delay |
سان | ئوبيېكت | 0 |
قورال كۆرسەتكۈچى (ms) نى كۆرسىتىش ۋە يوشۇرۇش - قولدا قوزغىتىش تىپىغا ماس كەلمەيدۇ ئەگەر بىر سان تەمىنلەنسە ، يوشۇرۇش / كۆرسىتىشكە كېچىكىش قوللىنىلىدۇ ئوبيېكت قۇرۇلمىسى: |
html |
boolean | false |
قورال قورالىدا HTML غا يول قويۇڭ. ئەگەر راست بولسا ، قورال كۆرسەتكۈچىدىكى HTML خەتكۈچلىرى ئەگەر XSS ھۇجۇمىدىن ئەنسىرىسىڭىز تېكىست ئىشلىتىڭ. |
placement |
string | function | 'top' |
قورال قورالنى قانداق ئورۇنلاشتۇرۇش - ئاپتوماتىك | top | ئاستى | left | توغرا. ئېنىقلانغاندىن كېيىن ، ئۇ قورال قورالنى ھەرىكەتچان ھالدا قايتىدىن ئۆزگەرتىدۇ ئورۇنلاشتۇرۇشنى بەلگىلەشتە فۇنكسىيە ئىشلىتىلگەندە ، ئۇ قورال قورال DOM تۈگۈنى بىلەن بىرىنچى تالاش-تارتىش ، قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى دەپ ئاتىلىدۇ. |
selector |
string | false | false |
ئەگەر تاللىغۇچ تەمىنلەنسە ، قورال كۆرسەتكۈچ ئوبيېكتى بەلگىلەنگەن نىشانغا تاپشۇرۇلىدۇ. jQuery.on ئەمەلىيەتتە ، بۇ ھەرىكەتچان قوشۇلغان DOM ئېلېمېنتلىرىغا ( قوللاش) قورال قوراللىرىنى ئىشلىتىشكىمۇ ئىشلىتىلىدۇ . بۇنى ۋە مەزمۇنلۇق مىسالنى كۆرۈڭ . |
template |
string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
قورال قوراللىرىنى قۇرغاندا ئىشلىتىدىغان HTML نى ئاساس قىلىڭ. قورال قوراللىرى
سىرتقى ئورالما ئېلېمېنتىنىڭ |
title |
string | element | function | '' |
|
trigger |
string | 'hover focus' |
قورال قوراللىرى قانداق قوزغىتىلىدۇ - نى بېسىڭ hover | فوكۇس | manual. سىز بىر نەچچە قوزغاتقۇچتىن ئۆتۈپ كېتىشىڭىز مۇمكىن. ئۇلارنى بوشلۇق بىلەن ئايرىڭ.
|
fallbackPlacements |
سانلار گۇرپىسى | ['top', 'right', 'bottom', 'left'] |
سانلار گۇرپىسىدىكى ئورۇنلاشتۇرۇش تىزىملىكى بىلەن تەمىنلەش ئارقىلىق كەينىگە قايتىشنى بەلگىلەڭ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ ھەرىكەت ھۆججىتىنى كۆرۈڭ |
boundary |
string | ئېلېمېنت | 'clippingParents' |
قورال قوراللىرىنىڭ ئېقىپ كېتىش چەكلىمىسى (پەقەت Popper نىڭ ئالدىنى ئېلىش ئېقىمى ئۆزگەرتكۈچكە ماس كېلىدۇ). سۈكۈتتىكى ھالەتتە ئۇ 'clippingParents' HTMLElement پايدىلىنىشىنى قوبۇل قىلالايدۇ (پەقەت JavaScript ئارقىلىق). تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ detectOverflow ھۆججىتىنى كۆرۈڭ . |
customClass |
string | function | '' |
كۆرسىتىلگەندە قورال كۆرسەتكۈچىگە دەرس قوشۇڭ. شۇنىڭغا دىققەت قىلىڭكى ، بۇ دەرسلەر قېلىپدا كۆرسىتىلگەن ھەر قانداق دەرسلەردىن باشقا قوشۇلىدۇ. كۆپ سىنىپ قوشۇش ئۈچۈن ئۇلارنى بوشلۇق بىلەن ئايرىڭ : قوشۇمچە سىنىپ نامىنى ئۆز ئىچىگە ئالغان بىر قۇرنى قايتۇرىدىغان فۇنكسىيەنىمۇ ئۆتەلەيسىز. |
sanitize |
boolean | true |
تازىلىقنى قوزغىتىش ياكى چەكلەش. ئەگەر قوزغىتىلسا 'template' ۋە 'title' تاللاشلار تازىلىنىدۇ. بىزنىڭ JavaScript ھۆججىتىمىزدىكى تازىلىق بۆلىكىنى كۆرۈڭ . |
allowList |
ئوبيېكت | كۆڭۈلدىكى قىممىتى | رۇخسەت قىلىنغان خاسلىق ۋە بەلگىلەرنى ئۆز ئىچىگە ئالغان ئوبيېكت |
sanitizeFn |
null | function | null |
بۇ يەردە ئۆزىڭىزنىڭ تازىلاش ئىقتىدارىنى تەمىنلىيەلەيسىز. ئەگەر مەخسۇس كۇتۇپخانا ئىشلىتىپ تازىلىق قىلىشنى ياخشى كۆرسىڭىز ، بۇ پايدىلىق بولىدۇ. |
offset |
array | string | function | [0, 0] |
نىشانغا سېلىشتۇرغاندا قورال قوراللىرىنىڭ تولۇقلىنىشى. سىز پەش ئارقىلىق ئايرىلغان قىممەت بىلەن سانلىق مەلۇمات خاسلىقىدا بىر قۇرنى يوللىيالايسىز: فۇنكسىيەنى ئېنىقلاش ئۈچۈن فۇنكسىيە قوللىنىلغاندا ، ئۇ پوپايكا ئورنىتىش ، پايدىلىنىش ماتېرىيالى ۋە پوپايكىلارنى ئۆز ئىچىگە ئالغان جىسىم بىلەن بىرىنچى تالاش-تارتىش دەپ ئاتىلىدۇ. قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى تالاش-تارتىش سۈپىتىدە ئۆتتى. بۇ ئىقتىدار چوقۇم ئىككى سان بىلەن سانلار گۇرپىسىنى قايتۇرۇشى كېرەك . تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ offset ھۆججىتىنى كۆرۈڭ . |
popperConfig |
null | ئوبيېكت | function | null |
Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆزگەرتىش ئۈچۈن Popper نىڭ سەپلىمىسىنى كۆرۈڭ . Popper سەپلىمىسىنى ھاسىل قىلىشتا بىر ئىقتىدار ئىشلىتىلگەندە ، ئۇ Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆز ئىچىگە ئالغان جىسىم بىلەن ئاتىلىدۇ. ئۇ سىزنىڭ سەپلىمىسىڭىز بىلەن سۈكۈتتىكىنى ئىشلىتىشىڭىزگە ۋە بىرلەشتۈرۈشىڭىزگە ياردەم بېرىدۇ. بۇ ئىقتىدار چوقۇم Popper نىڭ سەپلىمە ئوبيېكتىنى قايتۇرۇشى كېرەك. |
يەككە قورال قوراللىرىنىڭ سانلىق مەلۇمات خاسلىقى
ئايرىم قورال قوراللىرىنىڭ تاللانمىلىرىنى يۇقىرىدا چۈشەندۈرۈلگەندەك سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش ئارقىلىق بەلگىلىگىلى بولىدۇ.
بىلەن ئىقتىدار ئىشلىتىشpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methods
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
show
بىر ئېلېمېنتنىڭ قورال قوراللىرىنى ئاشكارىلايدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.tooltip
بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. نۆل ئۇزۇنلۇقتىكى ماۋزۇلار بار قوراللار ھەرگىز كۆرۈنمەيدۇ.
tooltip.show()
يوشۇر
ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.tooltip
بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.
tooltip.hide()
toggle
ئېلېمېنتنىڭ قورال قوراللىرىنى بىر تەرەپ قىلىدۇ. قورال كۆرسەتكۈچى ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە ياكى ھادىسە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ قورال قورالنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.tooltip
hidden.bs.tooltip
tooltip.toggle()
بىر تەرەپ قىلىش
ئېلېمېنتنىڭ قورال قوراللىرىنى يوشۇرىدۇ ۋە يوقىتىدۇ (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ). ۋەكىللەر ئۆمىكىنى ئىشلىتىدىغان قوراللار ( تاللاش ئارقىلىقselector
ياسالغان ) ئەۋلاد قوزغاتقۇچ ئېلېمېنتلىرىدا ئايرىم بۇزۇلمايدۇ.
tooltip.dispose()
قوزغىتىش
ئېلېمېنتنىڭ قورال كۆرسەتكۈچىنى كۆرسىتىش ئىقتىدارىنى بېرىدۇ. قورال قوراللىرى سۈكۈتتىكى ھالەتتە قوزغىتىلغان.
tooltip.enable()
چەكلەش
ئېلېمېنتنىڭ قورال كۆرسەتكۈچىنى كۆرسىتىش ئىقتىدارىنى يوقىتىدۇ. قورال قورالنى قايتا قوزغىتىلغاندىلا كۆرسەتكىلى بولىدۇ.
tooltip.disable()
toggleEnabled
ئېلېمېنتنىڭ قورال كۆرسەتكۈچىنى كۆرسىتىش ياكى يوشۇرۇش ئىقتىدارىنى ئۆزگەرتىدۇ.
tooltip.toggleEnabled()
يېڭىلاش
ئېلېمېنتنىڭ قورال قوراللىرىنىڭ ئورنىنى يېڭىلايدۇ.
tooltip.update()
getInstance
تۇراقلىق ئۇسۇل ئارقىلىق 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
Events
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
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()