Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Совети за алатки

Документација и примери за додавање прилагодени совети за алатки за Bootstrap со CSS и JavaScript користејќи CSS3 за анимации и податоци-bs-атрибути за локално складирање на наслови.

Преглед

Работи што треба да ги знаете кога го користите приклучокот за совети за алатки:

  • Советите за алатки се потпираат на библиотеката од трета страна Popper за позиционирање. Мора да вклучите popper.min.js пред bootstrap.js или да користите bootstrap.bundle.min.js/ bootstrap.bundle.jsшто содржи Popper за да функционираат советите за алатки!
  • Советите за алатки се вклучени поради перформанси, па мора сами да ги иницијализирате .
  • Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.
  • Наведете container: 'body'за да избегнете рендерирање проблеми во посложени компоненти (како што се нашите влезни групи, групи копчиња итн.).
  • Активирањето совети за алатки на скриените елементи нема да работи.
  • Советите за алатки за .disabledили disabledелементи мора да се активираат на елементот за обвивка.
  • Кога се активираат од хиперврски кои опфаќаат повеќе линии, советите за алатки ќе бидат центрирани. Користете white-space: nowrap;го вашиот <a>s за да го избегнете ова однесување.
  • Советите за алатки мора да бидат скриени пред нивните соодветни елементи да бидат отстранети од DOM.
  • Советите за алатки може да се активираат благодарение на елемент во сенка DOM.
Стандардно, оваа компонента користи вградено средство за дезинфекција на содржината, кое ги отстранува сите елементи на HTML што не се експлицитно дозволени. Погледнете го делот за дезинфекција во нашата JavaScript документација за повеќе детали.
Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Го имате сето тоа? Одлично, ајде да видиме како функционираат со неколку примери.

Пример: овозможете совети за алатки насекаде

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Примери

Лебдете над линковите подолу за да ги видите советите за алатки:

Текст на место за демонстрација на некои вметнати врски со совети за алатки. Ова сега е само полнење, без убиец. Содржината поставена овде само за да го имитира присуството на вистински текст . И сето тоа само за да ви даде идеја за тоа како би изгледале советите за алатки кога се користат во реални ситуации. Така, се надеваме дека сега сте виделе како овие совети за алатки на линковите можат да функционираат во пракса, откако ќе ги користите на вашата сопствена страница или проект.

Лебдите над копчињата подолу за да ги видите четирите насоки за совети за алатки: горе, десно, долу и лево. Насоките се пресликуваат кога се користи Bootstrap во RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

И со додаден прилагоден HTML:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Со SVG:

Сас

Променливи

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Употреба

Приклучокот за совети за алатки генерира содржина и обележување по барање, и стандардно ги поставува советите за алатки по нивниот елемент за активирање.

Активирајте го советот за алатка преку JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Прелевање autoиscroll

Позицијата на советот за алатки се обидува автоматски да се промени кога родителскиот контејнер има overflow: autoили overflow: scrollсака нашата .table-responsive, но сепак го задржува позиционирањето на оригиналното место. За да го решите ова, поставете ја boundaryопцијата (за модификаторот за превртување што ја користи popperConfigопцијата) на кој било HTMLElement за да ја отфрли стандардната вредност 'clippingParents', како на пример document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Означување

Потребната ознака за совет за алатка е само dataатрибут и titleна елементот HTML сакате да имате совет за алатка. Генерираната ознака на советот за алатка е прилично едноставна, иако бара позиција (стандардно, поставена topод приклучокот).

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

Треба да додавате само совети за алатки на елементите на HTML кои традиционално се фокусираат на тастатурата и се интерактивни (како што се врски или контроли на форма). Иако произволните HTML-елементи (како што се <span>s) може да се направат фокусирани со додавање на tabindex="0"атрибутот, ова ќе додаде потенцијално досадни и збунувачки постојки на јазичиња на неинтерактивни елементи за корисниците на тастатурата, а повеќето помошни технологии моментално не го објавуваат советот за алатка во оваа ситуација. Дополнително, немојте да се потпирате само на hoverкако активирач за вашиот совет за алатки, бидејќи тоа ќе го направи невозможно да се активираат советите за алатки за корисниците на тастатура.

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Оневозможени елементи

Елементите со disabledатрибут не се интерактивни, што значи дека корисниците не можат да се фокусираат, лебдат или кликнат на нив за да активираат совет за алатка (или поповер). Како решение, ќе сакате да го активирате советот за алатка од обвивка <div>или <span>идеално направено фокусирање на тастатурата користејќи tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Опции

Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-bs-, како во data-bs-animation="". Погрижете се да го смените типот на буквата на името на опцијата од camelCase во ќебап-футрола кога ги пренесувате опциите преку атрибути на податоци. На пример, наместо да користите data-bs-customClass="beautifier", користете data-bs-custom-class="beautifier".

Забележете дека од безбедносни причини опциите sanitize, sanitizeFn, и allowListне може да се обезбедат со користење на атрибути на податоци.
Име Тип Стандардно Опис
animation булови true Применете транзиција за избледување на CSS на советот за алатки
container низа | елемент | лажни false

Го додава советот за алатка на одреден елемент. Пример: container: 'body'. Оваа опција е особено корисна затоа што ви овозможува да го поставите советот за алатка во текот на документот во близина на елементот за активирање - што ќе спречи советот за алатка да лебди подалеку од елементот за активирање при промена на големината на прозорецот.

delay број | објект 0

Одложено прикажување и криење на советот за алатка (ms) - не важи за рачниот тип на активирање

Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи

Структурата на објектот е:delay: { "show": 500, "hide": 100 }

html булови false

Дозволете HTML во советот за алатки.

Ако е точно, HTML-таговите во советот за алатки titleќе бидат прикажани во советот за алатки. Ако е неточно, innerTextимотот ќе се користи за вметнување содржина во DOM.

Користете текст ако сте загрижени за нападите на XSS.

placement низа | функција 'top'

Како да го позиционирате советот за алатки - автоматски | врвот | дното | лево | право.
Кога autoе одредено, тој динамички ќе го преориентира советот за алатка.

Кога функцијата се користи за одредување на поставеноста, таа се повикува со советот за алатка DOM јазол како прв аргумент и активирачкиот елемент DOM јазол како негов втор. Контекстот thisе поставен на примерот на советот за алатки.

selector низа | лажни false Доколку е обезбеден избирач, објектите за совети за алатки ќе бидат делегирани на наведените цели. Во пракса, ова се користи и за примена на совети за алатки за динамички додадени DOM елементи ( jQuery.onподдршка). Видете го ова и информативен пример .
template низа '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Основен HTML што треба да се користи при креирање на советот за алатки.

Врвот за алатката titleќе се инјектира во .tooltip-inner.

.tooltip-arrowќе стане стрелка на врвот на алатката.

Најоддалечениот елемент за обвивка треба да ја има .tooltipкласата и role="tooltip".

title низа | елемент | функција ''

Стандардна вредност на насловот ако titleатрибутот не е присутен.

Ако е дадена функција, таа ќе се повика со нејзиното thisреферентно множество до елементот на кој е прикачен советот за алатки.

trigger низа 'hover focus'

Како се активира советот за алатки - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место.

'manual'покажува дека советот за алатка ќе се активира програмски преку .show(), .hide()и .toggle()методите; оваа вредност не може да се комбинира со кој било друг активирач.

'hover'сам по себе ќе резултира со совети за алатки кои не можат да се активираат преку тастатурата и треба да се користат само доколку се присутни алтернативни методи за пренесување на истите информации за корисниците на тастатурата.

fallbackPlacements низа ['top', 'right', 'bottom', 'left'] Дефинирајте резервни пласмани со обезбедување листа на сместувања во низа (по редослед на претпочитање). За повеќе информации погледнете ги документите за однесувањето на Попер
boundary низа | елемент 'clippingParents' Границата на ограничување за прелевање на советот за алатка (важи само за модификаторот на Popper preventOverflow). Стандардно, тоа е 'clippingParents'и може да прифати референца HTMLElement (само преку JavaScript). За повеќе информации погледнете ги Popper's detectOverflow docs .
customClass низа | функција ''

Додајте класи во советот за алатки кога ќе се прикаже. Имајте предвид дека овие класи ќе се додадат како додаток на класите наведени во шаблонот. За да додадете повеќе класи, одделете ги со празни места: 'class-1 class-2'.

Можете исто така да пренесете функција која треба да врати една низа што содржи дополнителни имиња на класи.

sanitize булови true Овозможете или оневозможете ја дезинфекцијата. Ако се активира 'template'и 'title'опциите ќе се дезинфицираат. Погледнете го делот за дезинфекција во нашата JavaScript документација .
allowList објект Стандардна вредност Објект кој содржи дозволени атрибути и ознаки
sanitizeFn нула | функција null Овде можете да обезбедите своја сопствена функција за дезинфекција. Ова може да биде корисно ако претпочитате да користите посебна библиотека за да извршите дезинфекција.
offset низа | низа | функција [0, 0]

Поместување на советот за алатка во однос на неговата цел. Можете да пренесете низа во атрибути на податоци со вредности разделени со запирка како:data-bs-offset="10,20"

Кога функцијата се користи за определување на поместувањето, таа се повикува со објект што го содржи поставувањето на попер, референцата и попер рекциите како нејзин прв аргумент. Активирачкиот елемент DOM јазол се пренесува како втор аргумент. Функцијата мора да врати низа со два броја: .[skidding, distance]

За повеќе информации погледнете ги офсет документите на Попер .

popperConfig нула | објект | функција null

За да ја промените стандардната конфигурација на Popper на Bootstrap, видете ја конфигурацијата на Popper .

Кога функцијата се користи за креирање на Popper конфигурацијата, таа се повикува со објект што ја содржи стандардната Popper конфигурација на Bootstrap. Тоа ви помага да ги користите и споите стандардните со вашата сопствена конфигурација. Функцијата мора да врати конфигурациски објект за Popper.

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

Опциите за поединечни совети за алатки може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.

Користење на функцијата соpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методи

Асинхрони методи и транзиции

Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .

Погледнете ја нашата JavaScript документација за повеќе информации .

покажуваат

Го открива советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже советот за алатка (т.е. пред да се shown.bs.tooltipслучи настанот). Ова се смета за „рачно“ активирање на советот за алатка. Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.

tooltip.show()

крие

Го крие советот за алатка за елемент. Се враќа кај повикувачот пред навистина да се сокрие советот за алатка (т.е. пред да се hidden.bs.tooltipслучи настанот). Ова се смета за „рачно“ активирање на советот за алатка.

tooltip.hide()

префрли

Го исклучува советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже или скрие советот за алатка (т.е. пред да се случи тој shown.bs.tooltipили hidden.bs.tooltipнастан). Ова се смета за „рачно“ активирање на советот за алатка.

tooltip.toggle()

располага

Сокрива и уништува совет за алатка на елементот (Ги отстранува зачуваните податоци на елементот DOM). Советите за алатки кои користат делегирање (кои се креирани со опцијата selector) не можат поединечно да се уништат на елементите за активирање на потомците.

tooltip.dispose()

овозможи

Дава можност да се прикаже советот за алатка на елементот. Советите за алатки се стандардно овозможени.

tooltip.enable()

оневозможи

Ја отстранува можноста за прикажување на советот за алатка на елементот. Советот за алатка ќе може да се прикаже само ако е повторно овозможен.

tooltip.disable()

вклучи Овозможено

Ја исклучува можноста советот за алатка на елементот да се прикажува или скрие.

tooltip.toggleEnabled()

ажурирање

Ја ажурира позицијата на советот за алатка на елементот.

tooltip.update()

getInstance

Статички метод кој ви овозможува да го добиете примерот на советот за алатка поврзан со елементот DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Статички метод кој ви овозможува да го добиете примерот на советот за алатка поврзан со елемент DOM или да создадете нов во случај да не е иницијализиран

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Настани

Тип на настан Опис
show.bs.tooltip Овој настан се вклучува веднаш кога showќе се повика методот на пример.
shown.bs.tooltip Овој настан се активира кога советот за алатка е видлив за корисникот (ќе почека да заврши CSS транзицијата).
hide.bs.tooltip Овој настан се активира веднаш кога hideќе се повика методот на пример.
hidden.bs.tooltip Овој настан се активира кога советот за алатка ќе заврши со криење од корисникот (ќе почека да заврши CSS транзицијата).
inserted.bs.tooltip Овој настан се активира по show.bs.tooltipнастанот кога шаблонот за совети за алатки е додаден во DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()