Описи алатки

Преглед

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

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

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

Примери

Омогући савете

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Објашњење на линковима

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Прилагођени описи алата

Можете да прилагодите изглед описа алатки користећи ЦСС променљиве . Постављамо прилагођену класу са data-bs-custom-class="custom-tooltip"за опсег нашег прилагођеног изгледа и користимо је да заменимо локалну ЦСС променљиву.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Упутства

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

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

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

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

Са СВГ:

ЦСС

Променљиве

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, описи алата сада користе локалне ЦСС променљиве укључене .tooltipза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Сасс варијабле

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Употреба

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

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

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

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

Означавање

Потребна ознака за опис алата је само dataатрибут и titleна ХТМЛ елементу желите да имате опис алата. Генерисана ознака описа алата је прилично једноставна, иако захтева позицију (подразумевано, постављену на topдодатак).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут data-bs-delay='{"show":0,"hide":150}'.

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

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

Методе

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Догађаји

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()