Кеңештер

Обзор

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

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

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

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

Барактагы бардык кеңештерди инициализациялоонун бир жолу аларды 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;

Колдонуу

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Белгилөө

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

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

менен функцияны колдонууpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методдор

көрсөтүү

Элементтин кеңешин көрсөтөт. Чалуучуга инструментарий иш жүзүндө көрсөтүлө электе (б.а. 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

Окуялар

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()