Source

Описи алатки

Документација и примери за додавање прилагођених Боотстрап описа алатки са ЦСС-ом и ЈаваСцрипт-ом користећи ЦСС3 за анимације и атрибуте података за локално складиштење наслова.

Преглед

Ствари које треба знати када користите додатак за опис алата:

  • Савети се ослањају на библиотеку треће стране Поппер.јс за позиционирање. Морате укључити поппер.мин.јс пре боотстрап.јс или користити bootstrap.bundle.min.js/ bootstrap.bundle.jsкоји садржи Поппер.јс да би описи функционисали!
  • Ако градите наш ЈаваСцрипт из извора, он захтеваutil.js .
  • Објашњења се могу укључити из разлога перформанси, тако да их морате сами иницијализирати .
  • Објашњења са насловима нулте дужине се никада не приказују.
  • Наведите container: 'body'да бисте избегли проблеме са приказивањем у сложенијим компонентама (као што су наше групе за унос, групе дугмади, итд.).
  • Покретање описа алатки на скривеним елементима неће радити.
  • Објашњења за .disabledили disabledелементе морају бити покренута на елементу омотача.
  • Када се активирају са хипервеза које обухватају више редова, описи алата ће бити центрирани. Користите white-space: nowrap;на свом <a>с да бисте избегли ово понашање.
  • Објашњења морају бити сакривена пре него што се њихови одговарајући елементи уклоне из ДОМ-а.
  • Алати се могу покренути захваљујући елементу унутар ДОМ-а у сенци.

Ефекат анимације ове компоненте зависи од prefers-reduced-motionмедијског упита. Погледајте одељак о смањеном покрету наше документације о приступачности .

Имаш све то? Одлично, да видимо како раде на неким примерима.

Пример: Омогућите савете свуда

Један од начина да се иницијализују сви описи алата на страници био би да их изаберете према њиховом data-toggleатрибуту:

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

Примери

Пређите курсором преко линкова испод да бисте видели савете са алаткама:

Уске панталоне следећег нивоа кефије за које вероватно нисте чули. Фото штанд брада сирови тексас висока штампа веганска торба за гласнике стумптовн. Сеитан од фарме до стола, мцсвеенеи'с фикие одржива киноа 8-битна америчка одећа има винил цхамбраи од терри рицхардсон-а. Брада стумптовн, кардигани банх ми ломо тхундерцатс. Тофу биодизел Виллиамсбург марфа, четири локо мцсвеенеи'с цлеансе веган цхамбраи. Заиста ироничан занатлија без обзира на кеитар , сценестер од фарме до стола Банкси Аустин твиттер обрађује фрееган цред сирови тексас извор кафе једног порекла.

Пређите курсором преко дугмади у наставку да бисте видели четири упутства за савете: горе, десно, доле и лево.

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

И са додатком прилагођеног ХТМЛ-а:

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

Употреба

Додатак за опис алата генерише садржај и ознаке на захтев, и подразумевано поставља описе алата након њиховог елемента окидача.

Покрени опис алатке преко ЈаваСцрипт-а:

$('#example').tooltip(options)
Оверфлов autoандscroll

Положај описа алатке покушава да се аутоматски промени када родитељски контејнер има overflow: autoили overflow: scrollволи наш .table-responsive, али и даље задржава позиционирање оригиналног одредишта за пласман. Да бисте то решили, подесите boundaryопцију на било шта осим подразумеване вредности, 'scrollParent'као што је 'window':

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

Означавање

Потребна ознака за опис алата је само dataатрибут и titleна ХТМЛ елементу желите да имате опис алата. Генерисана ознака описа алата је прилично једноставна, иако захтева позицију (подразумевано, постављену на topдодатак).

Омогућите да савети функционишу за кориснике тастатуре и помоћне технологије

Требало би да додате само описе алата ХТМЛ елементима који су традиционално фокусирани на тастатуру и интерактивни (као што су везе или контроле обрасца). Иако произвољни ХТМЛ елементи (као што је <span>с) могу бити фокусирани додавањем 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>

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-animation="".

Име Тип Уобичајено Опис
анимација боолеан истинито Примените прелаз са ЦСС фаде на опис алатке
контејнер стринг | елемент | лажно лажно

Додаје опис алата одређеном елементу. Пример: container: 'body'. Ова опција је посебно корисна по томе што вам омогућава да позиционирате опис алата у току документа близу елемента за окидање – што ће спречити да опис алата одлебди од елемента за окидање током промене величине прозора.

кашњење број | објекат 0

Одлагање приказивања и сакривања описа алата (мс) – не примењује се на тип ручног окидача

Ако је наведен број, кашњење се примењује и на сакривање/прикажи

Структура објекта је:delay: { "show": 500, "hide": 100 }

хтмл боолеан лажно

Дозволите ХТМЛ у опису алатке.

Ако је тачно, ХТМЛ ознаке у опису алата titleће бити приказане у опису алата. Ако је нетачно, јКуери textметода ће се користити за уметање садржаја у ДОМ.

Користите текст ако сте забринути због КССС напада.

постављање стринг | функција 'врх'

Како поставити опис алата - ауто | врх | боттом | лево | јел тако.
Када autoје наведено, динамички ће преоријентисати опис алата.

Када се функција користи за одређивање положаја, она се позива са ДОМ чвором алатке као првим аргументом и покретачким елементом ДОМ чвором као другим. Контекст thisје постављен на инстанцу описа алата.

селектор стринг | лажно лажно Ако је обезбеђен селектор, објекти описа алата ће бити делегирани наведеним циљевима. У пракси, ово се такође користи за примену описа алата на динамички додане ДОМ елементе ( jQuery.onподршка). Погледајте ово и информативни пример .
шаблон низ '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Основни ХТМЛ који се користи приликом креирања описа алата.

Објашњење titleће бити убризгано у .tooltip-inner.

.arrowпостаће стрелица у опису алата.

Најудаљенији елемент омотача треба да има .tooltipкласу и role="tooltip".

наслов стринг | елемент | функција ''

Подразумевана вредност наслова ако titleатрибут није присутан.

Ако је дата функција, она ће бити позвана са својом thisреференцом постављеном на елемент за који је припојен опис алата.

Окидач низ 'фокус лебдења'

Како се покреће опис алата - кликните | ховер | фокус | упутство. Можете проследити више покретача; одвојите их размаком.

'manual'означава да ће се опис алата покренути програмски преко метода и .tooltip('show'); ова вредност се не може комбиновати ни са једним другим окидачем..tooltip('hide').tooltip('toggle')

'hover'сама по себи ће резултирати описима алата који се не могу покренути преко тастатуре и треба их користити само ако постоје алтернативни методи за преношење истих информација за кориснике тастатуре.

офсет број | низ 0 Померање описа алатке у односу на циљ. За више информација погледајте Поппер.јс офсет документе .
фаллбацкПлацемент стринг | низ 'флип' Дозволите да одредите коју позицију ће Поппер користити на резервном. За више информација погледајте документе о понашању Поппер.јс
граница стринг | елемент 'сцроллПарент' Граница ограничења преливања описа. Прихвата вредности 'viewport', 'window', 'scrollParent', или референце ХТМЛЕлемента (само ЈаваСцрипт). За више информација погледајте ПревенОверфлов документе Поппер.јс .

Атрибути података за појединачне описе алата

Опције за појединачне описе алата могу се алтернативно специфицирати коришћењем атрибута података, као што је горе објашњено.

Методе

Асинхроне методе и прелази

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

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

Догађаји

Тип догађаја Опис
схов.бс.тоолтип Овај догађај се покреће одмах када showсе позове метод инстанце.
приказано.бс.опис Овај догађај се покреће када опис алата постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
хиде.бс.тоолтип Овај догађај се покреће одмах када hideсе позове метод инстанце.
хидден.бс.тоолтип Овај догађај се покреће када се опис алатке заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
инсертед.бс.тоолтип Овај догађај се покреће након show.bs.tooltipдогађаја када је шаблон објашњења додат у ДОМ.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})