Source

Кеңештер

Анимациялар жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттары үчүн CSS3 аркылуу CSS жана JavaScript менен жеке Bootstrap инструменттерин кошуу үчүн документтер жана мисалдар.

Обзор

Tooltip плагинин колдонууда эмнени билүү керек:

  • Куралдар үчүн кеңештер 3-тараптын Popper.js китепканасына таянат . Сиз bootstrap.js алдында popper.min.js кошушуңуз керек же кеңештер иштеши үчүн Popper.js камтылган bootstrap.bundle.min.js/ колдонушуңуз керек!bootstrap.bundle.js
  • Эгер сиз биздин JavaScript булактан куруп жатсаңыз, андаutil.js .
  • Кеңештер майнаптуу себептерден улам кошулган, андыктан аларды өзүңүз башташыңыз керек .
  • Узундугу нөлгө барабар болгон кеңештер эч качан көрсөтүлбөйт.
  • container: 'body'Татаалыраак компоненттерде (мисалы, киргизүү топторубуз, баскыч топторубуз ж.б.) көйгөйлөрдү жаратпаш үчүн белгилеңиз .
  • Жашыруун элементтер боюнча кеңештерди иштетүү иштебейт.
  • Ороочу элементте .disabledже disabledэлементтер үчүн кеңештер иштетилиши керек.
  • Бир нече саптарды камтыган гипершилтемелерден иштетилгенде, кеңештер борборлоштурулат. Бул жүрүм-турумду болтурбоо үчүн white-space: nowrap;сиздин с боюнча колдонуңуз .<a>
  • Тиешелүү элементтери DOMдан алынып салынганга чейин, кеңештер жашырылышы керек.
  • Төмөнкү DOM ичиндеги элементтин жардамы менен кеңештерди иштетсе болот.

Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Мунун баарын алдыңызбы? Абдан жакшы, келгиле, алардын айрым мисалдар менен кантип иштээрин карап көрөлү.

Мисал: Бардык жерде кеңештерди иштетүү

Барактагы бардык кеңештерди инициализациялоонун бир жолу аларды data-toggleатрибуту боюнча тандоо болот:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Мисалдар

Куралдар кеңештерин көрүү үчүн төмөнкү шилтемелердин үстүнөн өтүңүз:

Тар шым кийинки деңгээл keffiyeh , балким , алар жөнүндө уккан эмес. Фото кабина сакал чийки джинсы тамга басуу вегетариандык мессенжер баштык Стумптаун. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-бит америкалык кийимдеринде терри Ричардсон винил камерасы бар . Сакал стмптаун, кардигандар banh mi lomo thundercats. Tofu биодизель Вильямсбург Марфа, төрт Локо Максвининин тазалоочу вегетариандык Чамбрей. Чынында эле ирониялык кол өнөрчү кандай гана keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бир келип чыккан кофе вирусу.

Курал кеңештеринин төрт багытын көрүү үчүн ылдыйдагы баскычтардын үстүнө өтүңүз: жогорку, оң, ылдый жана сол.

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

Жана өзгөчө HTML кошулган менен:

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

Колдонуу

Tooltip плагини мазмунду жана суроо-талап боюнча белгилерди жаратат жана демейки шартта куралдар кеңештерин триггер элементинен кийин жайгаштырат.

JavaScript аркылуу инструментти иштетиңиз:

$('#example').tooltip(options)
Толуп кетүү autoжанаscroll

overflow: autoАспаптын позициясы ата-энелик контейнерге ээ болгондо же overflow: scrollбиз жактырганда автоматтык түрдө өзгөртүүгө аракет кылат .table-responsive, бирок ошентсе да баштапкы жайгаштыруунун ордун сактап калат. Чечүү үчүн boundaryпараметрди демейки мааниден башка нерсеге коюңуз 'scrollParent', мисалы 'window':

$('#example').tooltip({ boundary: 'window' })

Белгилөө

dataКурал кеңеши үчүн талап кылынган белги атрибут гана болуп саналат жана titleHTML элементинде сиз кеңешке ээ болгуңуз келет. Аспаптын генерацияланган белгилөөсү өтө жөнөкөй, бирок ал позицияны талап кылат (демейки боюнча, topплагин тарабынан коюлган).

Клавиатура жана жардамчы технология колдонуучулары үчүн кеңештерди иштетүү

Салттуу түрдө клавиатурага багытталган жана интерактивдүү HTML элементтерине курал кеңештерин гана кошушуңуз керек (мисалы, шилтемелер же форманы башкаруу элементтери). Ылдыйкы HTML элементтерин (мисалы, <span>s) tabindex="0"атрибутту кошуу менен фокус кылса болот да, бул клавиатура колдонуучулары үчүн интерактивдүү эмес элементтерге потенциалдуу тажатма жана чаташтыргыч өтмөктөрдү кошот жана азыркы учурда көпчүлүк жардамчы технологиялар бул кырдаалда инструментти жарыялабайт. hoverКошумчалай кетсек, инструментарий кеңешиңиздин триггери катары гана ишенбеңиз , анткени бул сиздин курал кеңештериңизди клавиатура колдонуучулары үчүн ишке киргизүү мүмкүн эмес кылат.

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

Өчүрүлгөн элементтер

Атрибуту бар элементтер disabledинтерактивдүү эмес, башкача айтканда, колдонуучулар аларга көңүл буруп, курсорду басып же куралдын кеңешин (же попверди) иштете албайт. Чечим катары, сиз оролгон <div>же <span>, идеалдуу түрдө клавиатурада фокусталган баскычтан куралдын кеңешин иштетип , өчүрүлгөн элементти tabindex="0"жокко чыгаргыңыз келет.pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

Коопсуздук максатында sanitize, sanitizeFnжана whiteListопцияларын маалымат атрибуттары менен камсыздоо мүмкүн эмес экенин эске алыңыз.

аты Type Демейки Description
анимация логикалык чын Куралдар үчүн CSS өчүп өтүүнү колдонуңуз
контейнер string | элемент | жалган жалган

Белгилүү бир элементке инструментти кошот. Мисал: container: 'body'. Бул параметр өзгөчө пайдалуу, анткени ал куралдын кеңешин документтин агымында триггердик элементтин жанында жайгаштырууга мүмкүндүк берет - бул терезенин өлчөмүн өзгөртүү учурунда инструменттин триггер элементинен алыстап кетишине жол бербейт.
кечиктирүү саны | объект 0

Курал кеңешин көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес

Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат

Объекттин структурасы:delay: { "show": 500, "hide": 100 }
html логикалык жалган

Инструментте HTMLге уруксат бериңиз.

Эгер чын болсо, инструментарийдеги HTML тегдери инструментарийде titleкөрсөтүлөт. Эгер жалган болсо, jQuery textыкмасы DOMга мазмун киргизүү үчүн колдонулат.

XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз.
жайгаштыруу string | функция 'жогорку'

Куралды кантип жайгаштыруу керек - авто | top | түбү | сол | туура.
Качан autoкөрсөтүлгөн болсо, ал инструменттин кеңешин динамикалык түрдө өзгөртөт.

Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары шаймандык DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст thisинструменттин үлгүсүнө коюлган.
селектор string | жалган жалган Эгерде селектор камсыз кылынса, инструментарий объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет. Иш жүзүндө, бул динамикалык кошулган DOM элементтерине ( jQuery.onколдоо) кеңештерди колдонуу үчүн колдонулат. Бул жана маалыматтык мисалды караңыз .
шаблон сап '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Инструментти түзүүдө колдонуу үчүн HTML базасы.

Куралдуу titleкеңештер .tooltip-inner.

.arrowкуралдын жебеси болуп калат.

Эң сырткы ороочу элементте .tooltipкласс жана role="tooltip".
аталышы string | элемент | функция ''

titleЭгер атрибут жок болсо, демейки аталыш мааниси .

Функция берилсе, ал thisкуралдын кеңеши тиркелген элементке шилтеме топтому менен чакырылат.
триггер сап "фокус"

Инструментарий кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз.

'manual'.tooltip('show')инструменталдык кеңеш , .tooltip('hide')жана .tooltip('toggle')методдору аркылуу программалык түрдө иштетиле турганын көрсөтөт ; бул маани башка триггер менен айкалыштырылышы мүмкүн эмес.

'hover'өз алдынча клавиатура аркылуу иштетилбей турган кеңештерге алып келет жана клавиатура колдонуучулары үчүн ошол эле маалыматты жеткирүүнүн альтернативалуу ыкмалары болгондо гана колдонулушу керек.
офсет саны | string | функция 0

Курал тилкесинин максатына салыштырмалуу жылышы.

Функция офсетті аныктоо үчүн колдонулганда, ал биринчи аргумент катары офсеттик маалыматтарды камтыган объект менен чакырылат. Функция ошол эле структурадагы объектти кайтарышы керек. Иштетүүчү элемент DOM түйүнү экинчи аргумент катары өткөрүлөт.

Көбүрөөк маалымат алуу үчүн Popper.js'тин офсет документтерине кайрылыңыз .
fallbackPlacement string | массив 'флип' Поппер кайра кайтарууда кайсы позицияны колдоноорун көрсөтүүгө уруксат бериңиз. Көбүрөөк маалымат алуу үчүн Popper.jsтин жүрүм -туруму боюнча документтерди караңыз
чек ара string | элемент 'scrollParent' Куралдын ашыгынын чектөө чеги. 'viewport', 'window', 'scrollParent', же HTMLElement шилтемесинин маанилерин кабыл алат (JavaScript гана). Көбүрөөк маалымат алуу үчүн Popper.js'тин preventOverflow документтерине кайрылыңыз .
тазалоо логикалык чын Санитизацияны иштетүү же өчүрүү. Эгер иштетилсе 'template'жана 'title'опциялар тазаланат.
ак тизме объект Демейки маани Уруксат берилген атрибуттарды жана тегдерди камтыган объект
sanitizeFn null | функция нөл Бул жерде сиз өзүңүздүн дезинфекциялоо функциясын бере аласыз. Санитизациялоо үчүн атайын китепкананы колдонууну кааласаңыз, бул пайдалуу болушу мүмкүн.
popperConfig null | объект нөл Bootstrap демейки Popper.js конфигурациясын өзгөртүү үчүн Popper.js конфигурациясын караңыз

Жеке кеңештер үчүн маалымат атрибуттары

Жеке инструменттердин параметрлери, жогоруда түшүндүрүлгөндөй, маалымат атрибуттарын колдонуу аркылуу альтернатива катары көрсөтүлүшү мүмкүн.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .

$().tooltip(options)

Элементтердин коллекциясына инструментарий иштеткичти тиркейт.

.tooltip('show')

Элементтин кеңешин көрсөтөт. Чалуучуга инструментарий иш жүзүндө көрсөтүлө электе (б.а. shown.bs.tooltipокуя болгонго чейин) кайтып келет. Бул инструментти "кол менен" ишке киргизүү деп эсептелет. Узундугу нөлгө барабар болгон кеңештер эч качан көрсөтүлбөйт.

$('#element').tooltip('show')

.tooltip('hide')

Элементтин кеңешин жашырат. Чалуучуга инструментарий чындап жашырылганга чейин (б.а. hidden.bs.tooltipокуя болгонго чейин) кайтып келет. Бул инструментти "кол менен" ишке киргизүү деп эсептелет.

$('#element').tooltip('hide')

.tooltip('toggle')

Элементтин кеңешин которуштуруу. Чалуучуга инструментарий иш жүзүндө көрсөтүлгөнгө же жашырылганга чейин (б.а. shown.bs.tooltipже hidden.bs.tooltipокуя болгонго чейин) кайтып келет. Бул инструментти "кол менен" ишке киргизүү деп эсептелет.

$('#element').tooltip('toggle')

.tooltip('dispose')

Элементтин кеңештерин жашырат жана жок кылат. Өкүлчүлүктү колдонгон кеңештерди ( опцияны колдонуу мененselector түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылууга болбойт.

$('#element').tooltip('dispose')

.tooltip('enable')

Элементтин курал кеңешине көрсөтүү мүмкүнчүлүгүн берет. Кеңештер демейки боюнча иштетилген.

$('#element').tooltip('enable')

.tooltip('disable')

Элементтин куралдар кеңешин көрсөтүү мүмкүнчүлүгүн жок кылат. Курал кеңеши кайра иштетилгенде гана көрсөтүлө алат.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Элементтин кеңешин көрсөтүү же жашыруу мүмкүнчүлүгүн өчүрөт.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Элементтин инструментинин ордун жаңыртат.

$('#element').tooltip('update')

Окуялар

Окуя түрү Description
show.bs.tooltip Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн.bs.куралдуу кеңеш Бул окуя куралдын кеңеши колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
hide.bs.tooltip Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
hidden.bs.tooltip Бул окуя куралдын кеңеши колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт).
inserted.bs.куралдуу кеңеш Бул окуя show.bs.tooltipокуядан кийин, курал үлгүсү DOMга кошулгандан кийин өчүрүлөт. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})