Подсказки
Документация и примери за добавяне на персонализирани подсказки за 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 възел се предава като втори аргумент. За повече информация вижте офсетните документи на Popper . |
резервно поставяне | низ | масив | "обръщане" | Позволете да укажете коя позиция ще използва Popper при резервно връщане. За повече информация вижте документите за поведение на Popper |
customClass | низ | функция | '' | Добавете класове към подсказката, когато се покаже. Имайте предвид, че тези класове ще бъдат добавени в допълнение към всички класове, посочени в шаблона. За да добавите няколко класа, разделете ги с интервали: Можете също така да подадете функция, която трябва да върне единичен низ, съдържащ допълнителни имена на класове. |
граница | низ | елемент | 'scrollParent' | Граница на ограничението за препълване на подсказката. Приема стойностите на 'viewport' , 'window' , 'scrollParent' или препратка към HTMLElement (само за JavaScript). За повече информация вижте документите на PrevenOverflow на Popper . |
хигиенизирам | булево | вярно | Активирайте или деактивирайте санирането. Ако е активиран 'template' , и 'title' опциите ще бъдат дезинфекцирани. Вижте раздела за дезинфектанти в нашата JavaScript документация . |
бял списък | обект | Стойност по подразбиране | Обект, който съдържа разрешени атрибути и тагове |
sanitizeFn | нула | функция | нула | Тук можете да предоставите своя собствена функция за дезинфекция. Това може да бъде полезно, ако предпочитате да използвате специална библиотека за извършване на дезинфекция. |
popperConfig | нула | обект | нула | За да промените конфигурацията на Popper по подразбиране на Bootstrap, вижте конфигурацията на Popper |
Атрибути на данни за отделни подсказки
Опциите за отделни подсказки могат алтернативно да бъдат зададени чрез използването на атрибути на данни, както е обяснено по-горе.
Методи
Асинхронни методи и преходи
Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
$().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.bs.tooltip | Това събитие се задейства веднага, когато show се извика методът на екземпляра. |
показано.bs.tooltip | Това събитие се задейства, когато подсказката е направена видима за потребителя (ще изчака CSS преходите да завършат). |
hide.bs.tooltip | Това събитие се задейства незабавно, когато hide методът на екземпляра е извикан. |
hidden.bs.tooltip | Това събитие се задейства, когато подсказката свърши да бъде скрита от потребителя (ще изчака CSS преходите да завършат). |
вмъкнато.bs.tooltip | Това събитие се задейства след show.bs.tooltip събитието, когато шаблонът за подсказка е добавен към DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})