Verkfæraráð

Yfirlit

Hlutir sem þarf að vita þegar þú notar tooltip viðbótina:

• Verkfæraráð treysta á þriðja aðila bókasafnið Popper fyrir staðsetningu. Þú verður að hafa popper.min.js fyrir bootstrap.js eða nota bootstrap.bundle.min.js/ bootstrap.bundle.jssem inniheldur Popper til að verkfæraábendingar virki!
• Verkfæraráð eru valin af frammistöðuástæðum, svo þú verður að frumstilla þær sjálfur .
• Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.
• Tilgreindu container: 'body'til að forðast að skila vandamálum í flóknari íhlutum (eins og inntakshópum okkar, hnappahópum osfrv.).
• Það virkar ekki að kveikja á ábendingum um falda þætti.
• Verkfæraleiðbeiningar fyrir .disabledeða disabledþætti verða að vera virkjaðar á umbúðaeiningu.
• Þegar kveikt er á tenglum sem spanna margar línur verða verkfæraábendingar miðaðar. Notaðu white-space: nowrap;á þinn <a>s til að forðast þessa hegðun.
• Ábendingar verða að vera falin áður en samsvarandi þættir þeirra hafa verið fjarlægðir úr DOM.
• Hægt er að kveikja á verkfærum þökk sé frumefni inni í skugga DOM.

Áttu allt það? Frábært, við skulum sjá hvernig þeir virka með nokkrum dæmum.

Dæmi: Virkjaðu verkfæraábendingar alls staðar

Ein leið til að frumstilla allar verkfæraábendingar á síðu væri að velja þær eftir data-bs-toggleeiginleikum þeirra:

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

Dæmi

Farðu yfir tenglana hér að neðan til að sjá verkfæraleiðbeiningar:

Færðu bendilinn yfir hnappana hér að neðan til að sjá fjórar leiðbeiningar á tólum: efst, hægri, neðst og til vinstri. Leiðbeiningar eru speglaðar þegar Bootstrap er notað í RTL.

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

Og með sérsniðnu HTML bætt við:

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

Með SVG:

Sass

Breytur

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

Notkun

The tooltip tappi býr til efni og álagningu á eftirspurn og setur sjálfgefið verkfæraábendingar á eftir kveikjuhlutanum.

Kveiktu á tóli í gegnum 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')
})

Markup

Nauðsynleg merking fyrir verkfæraleiðbeiningar er aðeins dataeiginleiki og titleá HTML-einingunni viltu hafa verkfæraleiðbeiningar. Mynduð merking tækjaráðs er frekar einföld, þó hún krefjist stöðu (sjálfgefið, stillt á topaf viðbótinni).

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

Óvirkir þættir

Þættir með disabledeigindinni eru ekki gagnvirkir, sem þýðir að notendur geta ekki einbeitt sér, sveiflað eða smellt á þá til að kalla fram verkfæraábendingu (eða sprettiglugga). Sem lausn, þú vilt kveikja á tóli frá umbúðum <div>eða <span>, helst gert lyklaborðsfókus með því að nota 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>

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-, eins og í data-bs-animation="". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr camelCase í kebab-case þegar þú sendir valkostina í gegnum gagnaeiginleika. Til dæmis, í stað þess að nota data-bs-customClass="beautifier"skaltu nota data-bs-custom-class="beautifier".

Að nota aðgerð meðpopperConfig

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

Aðferðir

sýna

Sýnir verkfæraábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið sýnt (þ.e. áður en shown.bs.tooltipatburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni. Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.

tooltip.show()

fela sig

Felur ábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið falið (þ.e. áður en hidden.bs.tooltipatburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.

tooltip.hide()

skipta

Breytir ábendingum frumefnis. Snýr aftur til þess sem hringir áður en verkfæraábendingin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.tooltipeða hidden.bs.tooltipá sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.

tooltip.toggle()

farga

Felur og eyðileggur verkfæraábendingu frumefnis (Fjarlægir vistuð gögn á DOM-einingunni). Verkfæraábendingar sem nota úthlutun (sem eru búnar til með valmöguleikanum selector) er ekki hægt að eyða fyrir sig á afkvæma kveikjuþáttum.

tooltip.dispose()

virkja

Gefur verkfæri frumefnis möguleika á að vera sýndur. Verkfæraleiðbeiningar eru sjálfgefnar virkar.

tooltip.enable()

slökkva

Fjarlægir möguleikann á að sýna ábendingu frumefnis. Aðeins er hægt að sýna verkfæraráðið ef það er virkjað aftur.

tooltip.disable()

toggleEnabled

Skiptir um möguleikann á því að sýna eða fela verkfæraleiðbeiningar þáttar.

tooltip.toggleEnabled()

uppfærsla

Uppfærir staðsetningu ábendinga frumefnis.

tooltip.update()

getTilvik

Statísk aðferð sem gerir þér kleift að fá tólatilvikið tengt DOM frumefni

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

getOrCreateInstance

Statísk aðferð sem gerir þér kleift að fá tooltip tilvikið tengt DOM-einingu, eða búa til nýjan ef það var ekki frumstillt

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

Viðburðir

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

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

tooltip.hide()