Кораллар

CSS3 һәм JavaScript ярдәмендә Bootstrap коралларын өстәү өчен документлар һәм мисаллар, анимацияләр өчен CSS3 кулланып, җирле исем саклау өчен мәгълүмат-атрибутлар.

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

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

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

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

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

Биттәге барлык инструментларны башлап җибәрүнең бер ысулы - аларны data-toggleатрибутлары буенча сайлау:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Мисаллар

Корал киңәшләрен карау өчен түбәндәге сылтамалар өстендә йөрегез:

Дүрт коралның юнәлешен карау өчен астагы төймәләр өстенә басыгыз: өске, уң, аскы һәм сул.

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

Customәм махсус HTML өстәлде:

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

Куллану

Кораллар плагины таләп буенча эчтәлек һәм билгеләр чыгара, һәм триггер элементыннан соң корал күрсәтмәләрен урнаштыра.

JavaScript аша корал киңәшен эшләгез:

$('#example').tooltip(options)

$('#example').tooltip({ boundary: 'window' })

Билгеләү

Корал киңәше өчен кирәкле билгеләр - бары тик dataатрибут һәм titleHTML элементында сез кораллар булырга телисез. Корал киңәшенең ясалган билгесе бик гади, ләкин ул позиция таләп итә (килешү буенча, topплагин белән куелган).

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Инвалид элементлар

Атрибутлы элементлар disabledинтерактив түгел, димәк, кулланучылар кораллар (яки поповер) җибәрү өчен аларны туплый алмыйлар, күтәрә алмыйлар. Эш урыны буларак, сез кораллар коралын төргәктән <div>яисә <span>идеаль рәвештә клавиатура фокуслы итеп ясарга һәм инвалид элементны tabindex="0"юкка чыгарырга теләрсез.pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-animation="".

Методлар

$().tooltip(options)

Элемент коллекциясенә инструменты эшкәртүчене бәйли.

.tooltip('show')

Элемент коралын күрсәтә. Корал киңәше күрсәтелгәнче (ягъни shown.bs.tooltipвакыйга булганчы) шалтыратучыга кире кайта. Бу корал күрсәтмәсенең “кул белән” этәргеч булып санала. Нуль озынлыгы булган кораллар беркайчан да күрсәтелми.

$('#element').tooltip('show')

.tooltip('hide')

Элемент коралын яшерә. Корал киңәше яшерелгәнче (ягъни hidden.bs.tooltipвакыйга булганчы) шалтыратучыга кире кайта. Бу корал күрсәтмәсенең “кул белән” этәргеч булып санала.

$('#element').tooltip('hide')

.tooltip('toggle')

Элементның инструменты. Корал киңәше күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта. Бу корал күрсәтмәсенең “кул белән” этәргеч булып санала.shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

.tooltip('dispose')

Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

$('#element').tooltip('dispose')

.tooltip('enable')

Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.

$('#element').tooltip('enable')

.tooltip('disable')

Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Toggles the ability for an element’s tooltip to be shown or hidden.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Updates the position of an element’s tooltip.

$('#element').tooltip('update')

Events

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})