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

Преглед

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

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

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

Примери

Овозможи совети за алатки

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

Прилагодени совети за алатки

Можете да го прилагодите изгледот на советите за алатки користејќи CSS променливи . Поставивме приспособена класа со data-bs-custom-class="custom-tooltip"која ќе го опфатиме нашиот прилагоден изглед и ја користиме за да ја отфрлиме локалната CSS променлива.

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

Правци

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

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

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

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

Со SVG:

CSS

Променливи

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, советите за алатки сега користат локални CSS променливи .tooltipза подобрено прилагодување во реално време. Вредностите за променливите CSS се поставени преку Sass, така што прилагодувањето на Sass сè уште е поддржано.

  --#{$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};
  

Sass променливи

$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

Употреба

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

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

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на елементот HTML сакате да имате совет за алатка. Генерираната ознака на советот за алатка е прилично едноставна, иако бара позиција (стандардно, поставена 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>

Опции

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

Почнувајќи од Bootstrap 5.2.0, сите компоненти поддржуваат експериментален атрибут за резервирани податоци data-bs-configшто може да содржи едноставна конфигурација на компоненти како низа JSON. Кога елементот има data-bs-config='{"delay":0, "title":123}'и data-bs-title="456"атрибути, конечната titleвредност ќе биде 456и посебните атрибути на податоци ќе ги отфрлат вредностите дадени на data-bs-config. Покрај тоа, постоечките атрибути на податоци можат да ги сместат вредностите на JSON како 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()