Gurallar

Gysgaça syn

Gurallar maslahatynyň pluginini ulananyňyzda bilmeli zatlar:

• Gurallar, ýerleşiş üçin üçünji tarap kitaphanasy Popper -ä bil baglaýar . Öň popper.min.js goşmaly ýa -da Popper-i öz içine alýan bootstrap.jsbirini ulanmaly .bootstrap.bundle.min.js
• Gurallar öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
• Nol uzynlykly atlar bilen gurallar hiç haçan görkezilmeýär.
• container: 'body'Has çylşyrymly komponentlerde kynçylyk döretmezligi kesgitläň (giriş toparlarymyz, düwme toparlarymyz we ş.m.) .
• Gizlin elementlerdäki gural gurallary işlemez.
• Gurallar .disabledýa-da disabledelementler üçin gurallar, örtük elementinde bolmaly.
• Birnäçe setiri öz içine alýan giper-baglanyşyklardan başlanda, gurallar merkezleşdiriler. Bu gylyk-häsiýetden gaça durmak üçin s-leri white-space: nowrap;ulanyň .<a>
• Gurallar degişli elementleri DOM-dan aýrylmazdan ozal gizlenmeli.
• Gurallar, kölegeli DOM içindäki bir elementiň kömegi bilen işledilip bilner.

Bularyň hemmesi barmy? Ajaýyp, käbir mysallar bilen nähili işleýändigini göreliň.

Mysallar

Gural görkezmelerini açyň

Aboveokarda belläp geçişimiz ýaly, gurallary ulanmazdan ozal başlamaly. Sahypadaky ähli gural görkezmelerini başlamagyň bir usuly, olary öz data-bs-toggleaýratynlyklary boýunça saýlamak bolar:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Salgylar boýunça gurallar

Gural görkezmelerini görmek üçin aşakdaky baglanyşyklara basyň:

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

Omörite gurallar

CSS üýtgeýjilerini ulanyp, gurallaryň görnüşini düzüp bilersiňiz . Customörite data-bs-custom-class="custom-tooltip"daşky görnüşimizi giňeltmek we ýerli CSS üýtgeýjisini ýok etmek üçin ulanýarys.

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

Görkezmeler

Dört gural görkezmesini görmek üçin aşakdaky düwmeleriň üstünden basyň: ýokarky, sag, aşaky we çep. RTL-de Bootstrap ulanylanda görkezmeler aýnalanýar.

<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örite HTML goşuldy:

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

CSS

Üýtgeýjiler

“Bootstrap” -yň ösýän CSS üýtgeýjiler çemeleşmesiniň bir bölegi hökmünde, gurallar häzirki wagtda .tooltipgüýçlendirilen hakyky özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

$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

Ulanylyşy

Gurallar üçin plugin isleg boýunça mazmun we bellik döredýär we adaty ýagdaýda gural elementlerini trigger elementinden soň ýerleşdirýär.

Gurallar maslahatyny JavaScript arkaly işlediň:

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')
})

Bellik

Gurallar üçin zerur bellik diňe bir dataatribut bolup title, gurallar maslahatyny almak isleýän HTML elementiňizde. Gurallar maslahatynyň döredilen belligi gaty ýönekeý, ýöne bir pozisiýa talap edýär (deslapky görnüşde, topplugin tarapyndan kesgitlenýär).

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

Öçürilen elementler

Sypaty bolan elementler disabledinteraktiw däl, ýagny gurallar (ýa-da popover) açmak üçin ulanyjylar ünsi jemläp, aýlap ýa-da basyp bilmeýärler. Iş usuly hökmünde, gural görkezijisini bir örtükden <div>ýa-da iň <span>oňat klawiatura gönükdirilen ulanyp başlamak islärsiňiz 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>

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Bilen işlemekpopperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Usullar

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Wakalar

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()