Маслиҳатҳо

Барраси

Чизҳоеро, ки ҳангоми истифодаи плагини абзор бояд донист:

• Маслиҳатҳо барои ҷойгиркунӣ ба китобхонаи тарафи сеюми Popper такя мекунанд. Шумо бояд пеш аз bootstrap.js popper.min.js-ро дохил кунед ё истифода баред bootstrap.bundle.min.js/ bootstrap.bundle.jsки Попперро дар бар мегирад, то маслиҳатҳои асбобҳо кор кунанд!
• Маслиҳатҳои асбобҳо бо сабабҳои кор қабул карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
• Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.
• Барои container: 'body'пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра).
• Ба кор андохтани маслиҳатҳои асбобҳо дар унсурҳои пинҳон кор намекунад.
• Маслиҳатҳои асбобҳо барои .disabledё disabledунсурҳо бояд дар унсури печанда фаъол карда шаванд.
• Вақте ки аз гиперҳаволаҳое, ки сатрҳои сершуморро дарбар мегиранд, оғоз карда мешаванд, маслиҳатҳои асбобҳо дар марказ ҷойгир карда мешаванд. Барои пешгирӣ кардани ин рафтори white-space: nowrap;худ истифода баред .<a>
• Маслиҳатҳои асбобҳо бояд пеш аз хориҷ кардани унсурҳои мувофиқи онҳо аз 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атрибут интерактивӣ нестанд, яъне корбарон наметавонанд диққати худро ба он ҷо оваранд ё клик кунанд, то маслиҳати абзорро (ё popover) оғоз кунанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки маслиҳати абзорро аз парпеч ё бо истифода <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 ба kebab-case иваз кунед. Масалан, ба ҷои истифодаи 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()

toggleEnabled

Қобилияти нишон додан ё пинҳон кардани банди асбоби элементро иваз мекунад.

tooltip.toggleEnabled()

навсозӣ

Мавқеи маслиҳати элементро навсозӣ мекунад.

tooltip.update()

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли абзореро, ки бо унсури 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()