Кораллар

Гомуми күзәтү

Кораллар плагинын кулланганда белергә кирәк нәрсәләр:

• Кораллар урнаштыру өчен 3-нче партия китапханәсенә таяналар . Сез bootstrap.js алдыннан popper.min.js кертергә тиеш , яки корал киңәшләре эшләсен өчен Popper булган / кулланырга bootstrap.bundle.min.js/ кулланырга bootstrap.bundle.jsтиеш!
• Кораллар эш башкару сәбәпле оптималь, шуңа күрә сез аларны үзегез башларга тиеш .
• Нуль озынлыгы булган кораллар беркайчан да күрсәтелми.
• Катлаулырак компонентларда проблемалар китермәс өчен күрсәтегез container: 'body'(безнең кертү төркемнәре, төймә төркемнәре һ.б.).
• Яшерен элементлардагы инструмент киңәшләре эшләмәячәк.
• Электрон кораллар .disabledяки disabledэлементлар төрү элементында башланырга тиеш.
• Берничә сызыкны үз эченә алган гиперштамалардан башлангач, инструментлар үзәкләштереләчәк. Бу тәртиптән саклану өчен с-ларда white-space: nowrap;кулланыгыз .<a>
• Кораллар тиешле элементлар DOMдан чыгарылганчы яшерелергә тиеш.
• Кораллар DOM күләгәсе эчендәге элемент ярдәмендә башланырга мөмкин.

Барысы да бармы? Яхшы, әйдәгез аларның кайбер мисаллар белән ничек эшләвен карыйк.

Exampleрнәк: бөтен җирдә корал күрсәтмәләрен эшләгез

Биттәге барлык инструментларны башлап җибәрүнең бер ысулы - аларны 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 кулланганда юнәлешләр чагылдырылган.

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

Customәм махсус 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 белән:

Сасс

Variзгәрешләр

$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атрибут һәм titleHTML элементында сез корал киңәше булырга телисез. Корал киңәшенең ясалган билгесе бик гади, ләкин ул позиция таләп итә (килешү буенча, 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>

Вариантлар

Вариантларны мәгълүмат атрибутлары яки 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()

күчә

Элементның корал күрсәтмәсен күрсәтү яки яшерү мөмкинлеген күчә.

tooltip.toggleEnabled()

яңарту

Элемент коралының позициясен яңарта.

tooltip.update()

getInstance

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