Совети за алатки
Документација и примери за додавање прилагодени совети за алатки за Bootstrap со CSS и JavaScript користејќи CSS3 за анимации и атрибути на податоци за локално складирање на наслови.
Преглед
Работи што треба да ги знаете кога го користите приклучокот за совети за алатки:
- Советите за алатки се потпираат на библиотеката од трета страна Popper за позиционирање. Мора да вклучите popper.min.js пред bootstrap.js или да користите
bootstrap.bundle.min.js
/bootstrap.bundle.js
што содржи Popper за да функционираат советите за алатки! - Ако го градите нашиот JavaScript од извор, тоа бара
util.js
. - Советите за алатки се вклучени поради перформанси, па мора сами да ги иницијализирате .
- Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.
- Наведете
container: 'body'
за да избегнете рендерирање проблеми во посложени компоненти (како што се нашите влезни групи, групи копчиња итн.). - Активирањето совети за алатки на скриените елементи нема да работи.
- Советите за алатки за
.disabled
илиdisabled
елементи мора да се активираат на елементот за обвивка. - Кога се активираат од хиперврски кои опфаќаат повеќе линии, советите за алатки ќе бидат центрирани. Користете
white-space: nowrap;
го вашиот<a>
s за да го избегнете ова однесување. - Советите за алатки мора да бидат скриени пред нивните соодветни елементи да бидат отстранети од DOM.
- Советите за алатки може да се активираат благодарение на елемент во сенка DOM.
prefers-reduced-motion
медиумското барање. Погледнете го делот за
намалено движење од нашата документација за пристапност .
Го имате сето тоа? Одлично, ајде да видиме како функционираат со неколку примери.
Пример: овозможете совети за алатки насекаде
Еден начин да се иницијализираат сите совети за алатки на страницата би било да ги изберете според нивниот 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>
Употреба
Приклучокот за совети за алатки генерира содржина и обележување по барање, и стандардно ги поставува советите за алатки по нивниот елемент за активирање.
Активирајте го советот за алатка преку JavaScript:
$('#example').tooltip(options)
Прелевање auto
иscroll
Позицијата на советот за алатки се обидува автоматски да се промени кога родителскиот контејнер има overflow: auto
или overflow: scroll
сака нашата .table-responsive
, но сепак го задржува позиционирањето на оригиналното поставување. За да го решите, поставете ја boundary
опцијата на нешто друго освен стандардната вредност 'scrollParent'
, како на пр 'window'
.
$('#example').tooltip({ boundary: 'window' })
Означување
Потребната ознака за совет за алатка е само data
атрибут и title
на елементот HTML сакате да имате совет за алатка. Генерираната ознака на советот за алатка е прилично едноставна, иако бара позиција (стандардно, поставена 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
не може да се обезбедат со користење на атрибути на податоци.
Име | Тип | Стандардно | Опис |
---|---|---|---|
анимација | булови | вистина | Применете транзиција за избледување на CSS на советот за алатки |
контејнер | низа | елемент | лажни | лажни | Го додава советот за алатка на одреден елемент. Пример: |
одложување | број | објект | 0 | Одложено прикажување и сокривање на советот за алатка (ms) - не важи за рачниот тип на активирање Ако е доставен број, доцнењето се применува и за сокривање/прикажување Структурата на објектот е: |
html | булови | лажни | Дозволи HTML во советот за алатки. Ако е точно, HTML-таговите во советот за алатки Користете текст ако сте загрижени за нападите на XSS. |
поставување | низа | функција | 'врв' | Како да го позиционирате советот за алатки - автоматски | врвот | дното | лево | право. Кога функцијата се користи за одредување на поставеноста, таа се повикува со советот за алатка DOM јазол како прв аргумент и активирачкиот елемент DOM јазол како негов втор. Контекстот |
селектор | низа | лажни | лажни | Доколку е обезбеден избирач, објектите за совети за алатки ќе бидат делегирани на наведените цели. Во пракса, ова се користи и за примена на совети за алатки за динамички додадени DOM елементи ( jQuery.on поддршка). Видете го ова и информативен пример . |
шаблон | низа | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Основен HTML што треба да се користи при креирање на советот за алатки. Врвот за алатката
Најоддалечениот елемент за обвивка треба да ја има |
Наслов | низа | елемент | функција | '' | Стандардна вредност на насловот ако Ако е дадена функција, таа ќе се повика со нејзиното |
чкрапало | низа | „Фокус на лебди“ | Како се активира советот за алатки - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место.
|
офсет | број | низа | функција | 0 | Поместување на советот за алатка во однос на неговата цел. Кога функцијата се користи за одредување на поместувањето, таа се повикува со објект што ги содржи податоците за офсет како нејзин прв аргумент. Функцијата мора да врати објект со иста структура. Активирачкиот елемент DOM јазол се пренесува како втор аргумент. За повеќе информации погледнете ги офсет документите на Попер . |
резервна поставеност | низа | низа | 'превртување' | Дозволете да одредите која позиција ќе ја користи Попер при резервна копија. За повеќе информации погледнете ги документите за однесувањето на Попер |
прилагодена класа | низа | функција | '' | Додајте класи во советот за алатки кога ќе се прикаже. Имајте предвид дека овие класи ќе се додадат како додаток на класите наведени во шаблонот. За да додадете повеќе класи, одделете ги со празни места: Можете исто така да пренесете функција која треба да врати една низа што содржи дополнителни имиња на класи. |
граница | низа | елемент | 'scrollParent' | Границата на ограничување за прелевање на врвот на алатката. Ги прифаќа вредностите на 'viewport' , 'window' , 'scrollParent' или референца на HTMLElement (само JavaScript). За повеќе информации, погледнете ги Popper's preventOverflow docs . |
дезинфицираат | булови | вистина | Овозможете или оневозможете ја дезинфекцијата. Ако се активира 'template' и 'title' опциите ќе се дезинфицираат. Погледнете го делот за дезинфекција во нашата JavaScript документација . |
бела листа | објект | Стандардна вредност | Објект кој содржи дозволени атрибути и ознаки |
sanitizeFn | нула | функција | нула | Овде можете да обезбедите своја сопствена функција за дезинфекција. Ова може да биде корисно ако претпочитате да користите посебна библиотека за да извршите дезинфекција. |
popperConfig | нула | објект | нула | За да ја промените стандардната Popper конфигурација на Bootstrap, видете ја конфигурацијата на Popper |
Атрибути на податоци за поединечни совети за алатки
Опциите за поединечни совети за алатки може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.
Методи
Асинхрони методи и транзиции
Сите 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')
Настани
Тип на настан | Опис |
---|---|
прикажи.бс.совет за алатка | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.совет за алатка | Овој настан се активира кога советот за алатка е видлив за корисникот (ќе почека да заврши CSS транзицијата). |
скриј.бс.совет за алатка | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.bs.tooltip | Овој настан се активира кога советот за алатка ќе заврши со криење од корисникот (ќе почека да заврши CSS транзицијата). |
вметната.бс.совет за алатка | Овој настан се активира по show.bs.tooltip настанот кога шаблонот за совети за алатки е додаден во DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})