Source

Подсказки

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

Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

Разбра ли всичко това? Страхотно, нека видим как работят с някои примери.

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

Един от начините за инициализиране на всички подсказки на страница е да ги изберете по техния data-toggleатрибут:

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

Примери

Задръжте курсора на мишката над връзките по-долу, за да видите подсказки:

Тесни панталони следващо ниво keffiyeh вероятно не сте чували за тях. Фото кабина брада необработен деним висок печат веган чанта stumptown. Сейтан от фермата до масата, 8-битовото американско облекло на mcsweeney's fixie устойчива киноа има винил шамбре на Тери Ричардсън. Beard stumptown, cardigans banh mi lomo thundercats. Тофу биодизел уилямсбърг марфа, четири локо mcsweeney's cleanse vegan chambray. Наистина ироничен занаятчия каквото и да е keytar , scenester от ферма до маса banksy Austin twitter handle freegan cred raw denim single-origin coffee virusal.

Задръжте курсора на мишката над бутоните по-долу, за да видите четирите посоки на подсказките: отгоре, отдясно, отдолу и отляво.

<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.js .
резервно поставяне низ | масив "обръщане" Позволете да укажете коя позиция ще използва Popper при резервно връщане. За повече информация вижте документите за поведение на Popper.js
граница низ | елемент 'scrollParent' Граница на ограничението за препълване на подсказката. Приема стойностите на 'viewport', 'window', 'scrollParent'или препратка към HTMLElement (само за JavaScript). За повече информация вижте документите за предотвратяване на Overflow на Popper.js .
хигиенизирам булево вярно Активирайте или деактивирайте санирането. Ако е активиран 'template', и 'title'опциите ще бъдат дезинфекцирани.
бял списък обект Стойност по подразбиране Обект, който съдържа разрешени атрибути и тагове
sanitizeFn нула | функция нула Тук можете да предоставите своя собствена функция за дезинфекция. Това може да бъде полезно, ако предпочитате да използвате специална библиотека за извършване на дезинфекция.
popperConfig нула | обект нула За да промените конфигурацията на Popper.js по подразбиране на Bootstrap, вижте конфигурацията на Popper.js

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

Опциите за отделни подсказки могат алтернативно да бъдат зададени чрез използването на атрибути на данни, както е обяснено по-горе.

Методи

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

Всички 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...
})