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

Преглед

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

• Советите за алатки се потпираат на библиотеката од трета страна 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.

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

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

Еден начин да се иницијализираат сите совети за алатки на страницата би било да ги изберете според нивниот 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)

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

Означување

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

<!-- 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".

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

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

Методи

покажуваат

Го открива советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже советот за алатка (т.е. пред да се 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

Настани

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()