Описи алатки

Преглед

Ствари које треба знати када користите додатак за опис алата:

• Алати се ослањају на библиотеку треће стране Поппер за позиционирање. Морате укључити поппер.мин.јс пре боотстрап.јс или користити bootstrap.bundle.min.js/ bootstrap.bundle.jsкоји садржи Поппер да би описи функционисали!
• Објашњења се могу укључити из разлога перформанси, тако да их морате сами иницијализирати .
• Објашњења са насловима нулте дужине се никада не приказују.
• Наведите container: 'body'да бисте избегли проблеме са приказивањем у сложенијим компонентама (као што су наше групе за унос, групе дугмади, итд.).
• Покретање описа алатки на скривеним елементима неће радити.
• Објашњења за .disabledили disabledелементе морају бити покренута на елементу омотача.
• Када се активирају са хипервеза које обухватају више редова, описи алата ће бити центрирани. Користите white-space: nowrap;на свом <a>с да бисте избегли ово понашање.
• Објашњења морају бити сакривена пре него што се њихови одговарајући елементи уклоне из ДОМ-а.
• Алати се могу покренути захваљујући елементу унутар ДОМ-а у сенци.

Имаш све то? Одлично, да видимо како раде на неким примерима.

Пример: Омогућите савете свуда

Један од начина да се иницијализују сви описи алата на страници био би да их изаберете према њиховом data-bs-toggleатрибуту:

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

Примери

Пређите курсором преко линкова испод да бисте видели савете са алаткама:

Пређите курсором преко дугмади у наставку да бисте видели четири упутства за савете: горе, десно, доле и лево. Упутства се пресликавају када користите Боотстрап у РТЛ-у.

<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>

И са додатком прилагођеног ХТМЛ-а:

<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>

Са СВГ:

Сасс

Променљиве

$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;

Употреба

Додатак за опис алата генерише садржај и ознаке на захтев, и подразумевано поставља описе алата након њиховог елемента окидача.

Покрени опис алатке преко ЈаваСцрипт-а:

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на ХТМЛ елементу желите да имате опис алата. Генерисана ознака описа алата је прилично једноставна, иако захтева позицију (подразумевано, постављену на 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>

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-bs-, као у data-bs-animation="". Обавезно промените тип случаја назива опције из цамелЦасе у кебаб-цасе када преносите опције преко атрибута података. На пример, уместо да користите 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()

располагати

Сакрива и уништава опис елемента (уклања сачуване податке на ДОМ елементу). Објашњење које користи делегирање (које се креира помоћу опције selector) не може се појединачно уништити на елементима окидача потомака.

tooltip.dispose()

омогућити

Даје могућност приказа алатке елемента. Објашњења су подразумевано омогућена.

tooltip.enable()

онемогућити

Уклања могућност приказа описа елемента. Објашњење ће моћи да се прикаже само ако је поново омогућено.

tooltip.disable()

тогглеЕнаблед

Укључује могућност приказивања или сакривања описа елемента.

tooltip.toggleEnabled()

ажурирање

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

tooltip.update()

гетИнстанце

Статичка метода која вам омогућава да добијете инстанцу описа алата која је повезана са ДОМ елементом

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

гетОрЦреатеИнстанце

Статичка метода која вам омогућава да добијете инстанцу описа алата која је повезана са ДОМ елементом или да креирате нову у случају да није иницијализована

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()