Кеңестер
Анимациялар үшін CSS3 және жергілікті тақырыпты сақтау үшін деректер-bs-атрибуттары арқылы CSS және JavaScript көмегімен теңшелетін Bootstrap кеңестерін қосуға арналған құжаттама және мысалдар.
Шолу
Құралдар плагинін пайдалану кезінде білу керек нәрселер:
- Кеңестер орналасу үшін үшінші тарап кітапханасының Попперіне сүйенеді . Кеңестер жұмыс істеуі үшін bootstrap.js алдында popper.min.js қосу керек немесе Popper бар
bootstrap.bundle.min.js
/ пайдалану керекbootstrap.bundle.js
! - Құрал кеңестері өнімділік себептеріне байланысты қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
- Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.
container: 'body'
Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .- Жасырын элементтерде кеңестерді іске қосу жұмыс істемейді.
.disabled
Орау элементінде немесе элементтерге арналған құралдар кеңестеріdisabled
іске қосылуы керек.- Бірнеше жолды қамтитын гиперсілтемелерден іске қос��лғанда, құралдар кеңестері ортаға қойылады. Бұл әрекетті болдырмау үшін s
white-space: nowrap;
on yours пайдаланыңыз .<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 көмегімен:
Сасс
Айнымалылар
$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
кезде автоматты түрде өзгертуге әрекет жасайды , бірақ бастапқы орналастыру орнын сақтайды. Мұны шешу үшін әдепкі мәнді қайта анықтау үшін опцияны (опцияны пайдаланатын флип модификаторы үшін ) кез келген HTMLElement параметріне орнатыңыз , мысалы :overflow: scroll
.table-responsive
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 элементтеріне құралдар кеңестерін ғана қосу керек. Еркін HTML элементтерін (мысалы, <span>
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>
Опциялар
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-bs-
сияқты қосыңыз data-bs-animation=""
. Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін camelCase-тан кебаб-капқа өзгертуді ұмытпаңыз. Мысалы, пайдаланудың орнына 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' |
Құрал кеңесінің толып кету шектеуінің шекарасы (тек Поппердің preventOverflow модификаторына қолданылады). Әдепкі бойынша ол 'clippingParents' HTMLElement сілтемесін қабылдай алады (тек JavaScript арқылы). Қосымша ақпаратты Поппердің detectOverflow құжаттарынан қараңыз . |
customClass |
жол | функциясы | '' |
Көрсетілген кезде құралдар кеңесіне сыныптарды қосыңыз. Бұл сыныптар үлгіде көрсетілген кез келген сыныптарға қосымша қосылатынын ескеріңіз. Бірнеше сыныптарды қосу үшін оларды бос орындармен бөліңіз: Сондай-ақ қосымша сынып атаулары бар жалғыз жолды қайтаратын функцияны беруге болады. |
sanitize |
логикалық | true |
Санитизацияны қосыңыз немесе өшіріңіз. Белсендірілген болса 'template' және 'title' опциялар тазартылады. Біздің JavaScript құжаттамасындағы тазартқыш бөлімін қараңыз . |
allowList |
объект | Әдепкі мән | Рұқсат етілген төлсипаттар мен тегтерді қамтитын нысан |
sanitizeFn |
null | функциясы | null |
Мұнда сіз өзіңіздің дезинфекциялау функциясын бере аласыз. Санитизацияны орындау үшін арнайы кітапхананы пайдаланғыңыз келсе, бұл пайдалы болуы мүмкін. |
offset |
массив | жол | функциясы | [0, 0] |
Құрал кеңесінің мақсатына қатысты ығысуы. Жолды деректер атрибуттарында үтірмен бөлінген мәндермен жіберуге болады, мысалы: Функция ығысуды анықтау үшін пайдаланылғанда, ол бірінші аргумент ретінде поппер орналасуын, сілтемесін және поппер ректтерін қамтитын нысанмен шақырылады. Іске қосу элементінің DOM түйіні екінші аргумент ретінде жіберіледі. Функция екі саны бар массивді қайтаруы керек: . Қосымша ақпаратты Поппердің офсеттік құжаттарынан қараңыз . |
popperConfig |
null | нысан | функциясы | null |
Bootstrap әдепкі Popper конфигурациясын өзгерту үшін Поппер конфигурациясын қараңыз . Функция Popper конфигурациясын жасау үшін пайдаланылғанда, ол Bootstrap әдепкі Popper конфигурациясын қамтитын нысанмен шақырылады. Ол әдепкі параметрді өзіңіздің конфигурацияңызбен пайдалануға және біріктіруге көмектеседі. Функция Popper үшін конфигурация нысанын қайтаруы керек. |
Жеке кеңестер үшін деректер атрибуттары
Жеке кеңестерге арналған опцияларды жоғарыда түсіндірілгендей, деректер атрибуттарын пайдалану арқылы балама түрде көрсетуге болады.
функциясын пайдалану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.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
Оқиғалар
Оқиға түрі | Сипаттама |
---|---|
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()