Кораллар

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

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

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

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

Мисаллар

Корал киңәшләрен кушу

Aboveгарыда әйтелгәнчә, сез кулланганчы корал киңәшләрен башларга тиеш. Биттәге барлык корал инструкцияләрен башлап җибәрүнең бер ысулы - аларны 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>

Ectionsнәлеш

Дүрт коралның юнәлешен карау өчен астагы төймәләр өстенә басыгыз: өске, уң, аскы һәм сул. РТЛда 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>

Customәм махсус 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

Variзгәрешләр

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, инструментлар хәзерге вакытта .tooltipкөчәйтелгән реальләштерү өчен җирле 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};
  

Сасс үзгәрүләр

$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атрибут һәм 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 мәгълүматларына караганда, барлык компонентлар эксперименталь сакланган мәгълүмат атрибутын хуплый, 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()