Подсказки

Документация и примери за добавяне на персонализирани подсказки за 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 в сянка.

По подразбиране този компонент използва вградения дезинфектант на съдържание, който премахва всички HTML елементи, които не са изрично разрешени. Вижте раздела за дезинфектанти в нашата JavaScript документация за повече подробности.

Анимационният ефект на този компонент зависи от 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 избледняващ преход към подсказката
контейнер	низ \| елемент \| невярно	невярно	Добавя подсказката към конкретен елемент. Пример: `container: 'body'`. Тази опция е особено полезна, тъй като ви позволява да позиционирате подсказката в потока на документа близо до задействащия елемент - което ще попречи на подсказката да изплува от задействащия елемент по време на преоразмеряване на прозореца.
забавяне	номер \| обект	0	Забавяне на показването и скриването на подсказката (ms) - не се отнася за тип ръчно задействане Ако е предоставен номер, забавянето се прилага и за скриване/показване Структурата на обекта е:`delay: { "show": 500, "hide": 100 }`
html	булево	невярно	Разрешете HTML в подсказката. Ако е вярно, HTML таговете в подсказката `title`ще бъдат изобразени в подсказката. Ако е невярно, `text`методът на jQuery ще се използва за вмъкване на съдържание в DOM. Използвайте текст, ако се притеснявате от XSS атаки.
поставяне	низ \| функция	'Горна част'	Как да позиционирате подсказката - автоматично \| отгоре \| дъно \| наляво \| точно. Когато `auto`е посочено, то динамично ще преориентира подсказката. Когато функция се използва за определяне на разположението, тя се извиква с подсказката DOM възел като първи аргумент и задействащия елемент DOM възел като втори. Контекстът `this`е зададен на екземпляра на подсказката.
селектор	низ \| невярно	невярно	Ако е предоставен селектор, обектите с подсказки ще бъдат делегирани на посочените цели. На практика това се използва и за прилагане на подсказки към динамично добавени DOM елементи ( `jQuery.on`поддръжка). Вижте това и един информативен пример .
шаблон	низ	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	Основен HTML, който да се използва при създаване на подсказка. Подсказките `title`ще бъдат инжектирани в `.tooltip-inner`. `.arrow`ще се превърне в стрелка на подсказката. Най-външният обвиващ елемент трябва да има `.tooltip`клас и `role="tooltip"`.
заглавие	низ \| елемент \| функция	''	Стойност на заглавието по подразбиране, ако `title`атрибутът не присъства. Ако е дадена функция, тя ще бъде извикана с `this`препратка към елемента, към който е прикрепена подсказката.
спусък	низ	"ховър фокус"	Как се задейства подсказка - щракнете върху \| кръжи \| фокус \| ръководство. Можете да подадете няколко тригера; отделете ги с интервал. `'manual'`показва, че подсказката ще бъде задействана програмно чрез методите и `.tooltip('show')`; тази стойност не може да се комбинира с друг тригер.`.tooltip('hide').tooltip('toggle')` `'hover'`сама по себе си ще доведе до подсказки, които не могат да бъдат задействани чрез клавиатурата, и трябва да се използва само ако има алтернативни методи за предаване на същата информация за потребителите на клавиатурата.
изместване	номер \| низ \| функция	0	Отместване на подсказката спрямо нейната цел. Когато се използва функция за определяне на отместването, тя се извиква с обект, съдържащ данните за отместването като първи аргумент. Функцията трябва да върне обект със същата структура. Задействащият елемент DOM възел се предава като втори аргумент. За повече информация вижте офсетните документи на Popper .
резервно поставяне	низ \| масив	"обръщане"	Позволете да укажете коя позиция ще използва Popper при резервно връщане. За повече информация вижте документите за поведение на Popper
customClass	низ \| функция	''	Добавете класове към подсказката, когато се покаже. Имайте предвид, че тези класове ще бъдат добавени в допълнение към всички класове, посочени в шаблона. За да добавите няколко класа, разделете ги с интервали: `'a b'`. Можете също така да подадете функция, която трябва да върне единичен низ, съдържащ допълнителни имена на класове.
граница	низ \| елемент	'scrollParent'	Граница на ограничението за препълване на подсказката. Приема стойностите на `'viewport'`, `'window'`, `'scrollParent'`или препратка към HTMLElement (само за JavaScript). За повече информация вижте документите на PrevenOverflow на Popper .
хигиенизирам	булево	вярно	Активирайте или деактивирайте санирането. Ако е активиран `'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.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...
})

Подсказки

Преглед

Пример: Активирайте подсказки навсякъде

Примери

Използване

Преливане autoиscroll

Маркиране

Направете подсказките да работят за потребители на клавиатури и помощни технологии

Деактивирани елементи

Настроики

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

Методи

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

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('dispose')

.tooltip('enable')

.tooltip('disable')

.tooltip('toggleEnabled')

.tooltip('update')