Совети за алатки
Документација и примери за додавање прилагодени совети за алатки за Bootstrap со CSS и JavaScript користејќи CSS3 за анимации и атрибути на податоци за локално складирање на наслови.
Работи што треба да ги знаете кога го користите приклучокот за совети за алатки:
- Советите за алатки се потпираат на библиотеката од трета страна Popper.js за позиционирање. Мора да вклучите popper.min.js пред bootstrap.js или да користите
bootstrap.bundle.min.js
/bootstrap.bundle.js
што содржи Popper.js за да функционираат советите за алатки! - Ако го градите нашиот JavaScript од извор, тоа бара
util.js
. - Советите за алатки се вклучени поради перформанси, па мора сами да ги иницијализирате .
- Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.
- Наведете
container: 'body'
за да избегнете рендерирање проблеми во посложени компоненти (како што се нашите влезни групи, групи копчиња итн.). - Активирањето совети за алатки на скриените елементи нема да работи.
- Советите за алатки за
.disabled
илиdisabled
елементи мора да се активираат на елементот за обвивка. - Кога ќе се активираат од хиперврски кои опфаќаат повеќе линии, советите за алатки ќе бидат центрирани. Користете
white-space: nowrap;
го вашиот<a>
s за да го избегнете ова однесување. - Советите за алатки мора да бидат скриени пред да се отстранат нивните соодветни елементи од DOM.
Го имате сето тоа? Одлично, ајде да видиме како функционираат со неколку примери.
Еден начин да се иницијализираат сите совети за алатки на страницата би било да ги изберете според нивниот data-toggle
атрибут:
Лебди над линковите подолу за да ги видиш советите за алатки:
Тесни панталони од следното ниво keffiyeh веројатно не сте слушнале за нив. Фото кабина брада суров тексас летерпрес вегански гласник торба stumptown. Сејтанот од фарма до маса, 8-битната американска облека за одржлива киноа на Mcsweeney's fixie има винилна комора од Тери Ричардсон. Брада трупец, кардигани бан ми ломо громови. Тофу биодизел Вилијамсбург марфа, четири loko mcsweeney's cleanse vegan chambray. Навистина ироничен занаетчија без разлика на тастатурата, сценска сцена од фарма до маса, банкси на твитер во Остин, вирално е фриган кред сирово тексас кафе со едно потекло.
Лебдите над копчињата подолу за да ги видите четирите насоки за совети за алатки: горе, десно, долу и лево.
И со додаден прилагоден HTML:
Приклучокот за совети за алатки генерира содржина и обележување по барање, и стандардно ги поставува советите за алатки по нивниот елемент за активирање.
Активирајте го советот за алатка преку JavaScript:
Прелевање auto
иscroll
Позицијата на советот за алатки се обидува автоматски да се промени кога родителскиот контејнер има overflow: auto
или overflow: scroll
сака нашата .table-responsive
, но сепак го задржува позиционирањето на оригиналното поставување. За да го решите, поставете ја boundary
опцијата на нешто друго освен стандардната вредност 'scrollParent'
, како на пр 'window'
.
Потребната ознака за совет за алатка е само data
атрибут и title
на елементот HTML сакате да имате совет за алатка. Генерираната ознака на советот за алатка е прилично едноставна, иако бара позиција (стандардно, поставена top
од приклучокот).
Направете совети за алатки да работат за корисници на тастатура и помошна технологија
Треба да додавате само совети за алатки на елементите на HTML кои традиционално се фокусираат на тастатурата и се интерактивни (како што се врски или контроли на форма). Иако произволните HTML-елементи (како што се <span>
s) може да се направат фокусирани со додавање на tabindex="0"
атрибутот, ова ќе додаде потенцијално досадни и збунувачки постојки на јазичиња на неинтерактивни елементи за корисниците на тастатурата. Покрај тоа, повеќето помошни технологии моментално не го објавуваат советот за алатки во оваа ситуација.
Дополнително, немојте да се потпирате само на hover
како активирач за вашиот совет за алатки, бидејќи тоа ќе го направи невозможно да се активираат советите за алатки за корисниците на тастатура.
Елементите со disabled
атрибут не се интерактивни, што значи дека корисниците не можат да се фокусираат, лебдат или кликнат на нив за да активираат совет за алатка (или поповер). Како решение, ќе сакате да го активирате советот за алатка од обвивка <div>
или <span>
, идеално направен за фокусирање на тастатурата со помош на tabindex="0"
, и да го отфрлите pointer-events
на оневозможениот елемент.
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-animation=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
анимација | булови | вистина | Применете транзиција за избледување на CSS на советот за алатки |
контејнер | низа | елемент | лажни | лажни | Го додава советот за алатка на одреден елемент. Пример: |
одложување | број | објект | 0 | Одложено прикажување и сокривање на советот за алатка (ms) - не важи за рачниот тип на активирање Ако е доставен број, доцнењето се применува и за сокривање/прикажување Структурата на објектот е: |
html | булови | лажни | Дозволи HTML во советот за алатки. Ако е точно, HTML-таговите во советот за алатки Користете текст ако сте загрижени за нападите на XSS. |
поставување | низа | функција | 'врв' | Како да го позиционирате советот за алатки - автоматски | врвот | дното | лево | право. Кога функцијата се користи за одредување на поставеноста, таа се повикува со советот за алатка DOM јазол како прв аргумент и активирачкиот елемент DOM јазол како негов втор. Контекстот |
селектор | низа | лажни | лажни | Ако е обезбеден избирач, објектите за совети за алатки ќе бидат делегирани на наведените цели. Во пракса, ова се користи за да се овозможи динамична HTML содржина да има додадени поповери. Погледнете го ова и информативен пример . |
шаблон | низа | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Основен HTML што треба да се користи при креирање на советот за алатки. Врвот за алатка
Најоддалечениот елемент за обвивка треба да ја има |
Наслов | низа | елемент | функција | '' | Стандардна вредност на насловот ако Ако е дадена функција, таа ќе се повика со |
чкрапало | низа | „Фокус на лебди“ | Како се активира советот за алатки - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место.
|
офсет | број | низа | 0 | Поместување на советот за алатка во однос на неговата цел. За повеќе информации погледнете ги офсет документите на Popper.js . |
резервна поставеност | низа | низа | 'превртување' | Дозволете да одредите која позиција ќе ја користи Попер при резервна копија. За повеќе информации погледнете ги документите за однесување на Popper.js |
граница | низа | елемент | 'scrollParent' | Границата на ограничување за прелевање на врвната алатка. Ги прифаќа вредностите на 'viewport' , 'window' , 'scrollParent' или референца на HTMLElement (само JavaScript). За повеќе информации, погледнете ги документите за спречување на превртување на Popper.js . |
Атрибути на податоци за поединечни совети за алатки
Опциите за поединечни совети за алатки може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.
Асинхрони методи и транзиции
Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .
Погледнете ја нашата JavaScript документација за повеќе информации.
Прикачува управувач со совети за алатка за колекција на елементи.
Го открива советот за алатка на елементот. Се враќа кај повикувачот пред всушност да се прикаже советот за алатка (т.е. пред да се shown.bs.tooltip
случи настанот). Ова се смета за „рачно“ активирање на советот за алатки. Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.
Го крие советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се сокрие советот за алатка (т.е. пред да се hidden.bs.tooltip
случи настанот). Ова се смета за „рачно“ активирање на советот за алатки.
Го исклучува советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже или скрие советот за алатка (т.е. пред да се случи настанот shown.bs.tooltip
или hidden.bs.tooltip
). Ова се смета за „рачно“ активирање на советот за алатки.
Го крие и уништува советот за алатка на елементот. Советите за алатки кои користат делегирање (кои се креирани со користење на selector
опцијата ) не можат поединечно да се уништат на елементите за активирање потомци.
Дава можност да се прикаже советот за алатка на елементот. Советите за алатки се стандардно овозможени.
Ја отстранува можноста за прикажување на советот за алатка на елементот. Советот за алатка ќе може да се прикаже само ако е повторно овозможен.
Ја исклучува можноста советот за алатка на елементот да се прикажува или скрие.
Ја ажурира позицијата на советот за алатки на елементот.
Тип на настан | Опис |
---|---|
прикажи.бс.совет за алатка | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.совет за алатка | Овој настан се активира кога советот за алатката е видлив за корисникот (ќе чека да заврши CSS транзицијата). |
скриј.бс.совет за алатка | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.bs.tooltip | Овој настан се активира кога советот за алатка ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS). |
вметната.бс.совет за алатка | Овој настан се активира по show.bs.tooltip настанот кога шаблонот за совети за алатки е додаден во DOM. |