Gurallar

Gysgaça syn

Gurallar üçin plugin ulanylanda bilmeli zatlar:

• Gurallar, ýerleşiş üçin 3-nji tarap kitaphanasy Popper -e bil baglaýar . Bootstrap.js-dan öň popper.min.js goşmaly ýa -da gurallaryň işlemegi üçin Popper-i ulanmaly bootstrap.bundle.min.js/ ulanmaly!bootstrap.bundle.js
• Gurallar öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
• Nol uzynlykdaky 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 örtük elementinde başlamaly.
• 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ň.

Mysal: Gural gurallaryny hemme ýerde işlediň

Sahypadaky ähli gural görkezmelerini başlamagyň bir usuly, olary data-bs-toggleatributlary boýunça saýlamak bolar:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Mysallar

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

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

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

Sass

Üýtgeýjiler

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

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

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

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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-bolşy ýaly goşuň data-bs-animation="". Opsiýalary maglumat atributlary arkaly geçireniňizde, opsiýanyň adynyň görnüşini kamelCase-den kebab-kase üýtgediň. Mysal üçin, ulanmagyň ýerine data-bs-customClass="beautifier"ulanyň data-bs-custom-class="beautifier".

Bilen işlemekpopperConfig

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

Usullar

görkezmek

Bir elementiň gural görkezmesini açýar. Gural görkezmesi hakykatdanam görkezilmänkä (ýagny shown.bs.tooltipwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. Bu gurallar maslahatynyň “el bilen” başlamagy hasaplanýar. Nol uzynlykdaky atlar bilen gurallar hiç haçan görkezilmeýär.

tooltip.show()

gizle

Bir elementiň gural görkezmesini gizleýär. Gurallar maslahaty hakykatdanam gizlenmänkä (ýagny hidden.bs.tooltipwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu gurallar maslahatynyň “el bilen” başlamagy hasaplanýar.

tooltip.hide()

üýtgetmek

Bir elementiň gurallar maslahatyny üýtgedýär. Gurallar görkezmesi hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.tooltipýa-da hidden.bs.tooltipwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu gurallar maslahatynyň “el bilen” başlamagy hasaplanýar.

tooltip.toggle()

taşlaň

Bir elementiň gurallar maslahatyny gizleýär we ýok edýär (DOM elementindäki saklanan maglumatlary aýyrýar). Delegasiýany ulanýan gurallar (opsiýany ulanyp döredilýär ) selectornesil trigger elementlerinde aýratyn ýok edilip bilinmez.

tooltip.dispose()

işletmek

Bir elementiň gural görkezmesini görkezmek ukybyny berýär. Gurallar adaty ýagdaýda işledilýär.

tooltip.enable()

öçürmek

Bir elementiň gural görkezmesiniň görkezilmegini aradan aýyrýar. Gurallar maslahaty diňe täzeden işledilen ýagdaýynda görkezilip bilner.

tooltip.disable()

açmak

Bir elementiň gural görkezmesiniň görkezilmegi ýa-da gizlenmegi mümkinçiligini üýtgedýär.

tooltip.toggleEnabled()

täzelen

Bir elementiň gurallar guralynyň ýagdaýyny täzeleýär.

tooltip.update()

GetInstance

DOM elementi bilen baglanyşykly gurallar meselesini almaga mümkinçilik berýän statiki usul

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

DOM elementi bilen baglanyşykly gurallar meselesini almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Wakalar

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()