Кеңештер

Анимациялар жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттары үчүн 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 ичиндеги элементтин жардамы менен кеңештерди иштетсе болот.

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

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

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

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

Мисалдар

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

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

<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)

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

Белгилөө

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

<!-- 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="".

Методдор

$().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')

Окуялар

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})