Кеңештер

Обзор

Tooltip плагинин колдонууда билүү керек нерселер:

• Куралдар кеңештери жайгаштыруу үчүн үчүнчү тараптын Поппер китепканасына таянат . Буга чейин popper.min.js кошушуңуз керек bootstrap.jsже bootstrap.bundle.min.jsPopper камтылганын колдонушуңуз керек.
• Кеңештер майнаптуу себептерден улам кошулган, андыктан аларды өзүңүз башташыңыз керек .
• Узундугу нөлгө барабар болгон кеңештер эч качан көрсөтүлбөйт.
• container: 'body'Татаалыраак компоненттерде (мисалы, киргизүү топторубуз, баскыч топторубуз ж.б.) көйгөйлөрдү жаратпаш үчүн белгилеңиз .
• Жашыруун элементтер боюнча кеңештерди иштетүү иштебейт.
• Ороочу элементте .disabledже disabledэлементтер үчүн кеңештер иштетилиши керек.
• Бир нече саптарды камтыган гипершилтемелерден иштетилгенде, кеңештер борборлоштурулат. Бул жүрүм-турумду болтурбоо үчүн white-space: nowrap;сиздин с боюнча колдонуңуз .<a>
• Тиешелүү элементтери 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>

Багыттар

Курал кеңештеринин төрт багытын көрүү үчүн ылдыйдагы баскычтардын үстүнө өтүңүз: жогорку, оң, ылдый жана сол. RTLде Bootstrap колдонууда багыттар чагылдырылат.

<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

Өзгөрмөлөр

.tooltipBootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, инструменталдык кеңештер эми реалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонот . 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

Колдонуу

Tooltip плагини мазмунду жана суроо-талап боюнча белгилерди жаратат жана демейки шартта куралдар кеңештерин триггер элементинен кийин жайгаштырат.

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Курал кеңеши үчүн талап кылынган белги атрибут гана болуп саналат жана titleHTML элементинде сиз кеңешке ээ болгуңуз келет. Аспаптын генерацияланган белгилөөсү өтө жөнөкөй, бирок ал позицияны талап кылат (демейки боюнча, 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 ”ден “ kebab-case ”ге өзгөртүүнү унутпаңыз. Мисалы, data-bs-custom-class="beautifier"ордуна колдонуңуз data-bs-customClass="beautifier".

Bootstrap 5.2.0 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте 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()