Tööriistanõuanded

Ülevaade

Mida peaksite tööriistavihje pistikprogrammi kasutamisel teadma:

• Tööriistanäpunäited toetuvad positsioneerimiseks kolmanda osapoole teegile Popper . Tööriistanäpunäidete toimimiseks peate lisama popper.min.js enne bootstrap.js-i või funktsiooni bootstrap.bundle.min.js/ bootstrap.bundle.js, mis sisaldab Popperit!
• Tööriistanäpunäited on toimivuse huvides lubatud, seega peate need ise lähtestama .
• Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.
• Määrake container: 'body', et vältida renderdamisprobleeme keerukamates komponentides (nt meie sisendrühmad, nupurühmad jne).
• Peidetud elementide tööriistavihjete käivitamine ei tööta.
• Ümbriselemendil tuleb käivitada tööriistaspikrid .disabledvõi disabledelementide jaoks.
• Kui käivitatakse mitut rida hõlmavate hüperlinkide kaudu, tsentreeritakse kohtspikrid. Sellise käitumise vältimiseks kasutage white-space: nowrap;seda oma peal .<a>
• Tööriistavihjed peavad olema peidetud enne, kui nende vastavad elemendid on DOM-ist eemaldatud.
• Tööriistanäpunäiteid saab käivitada tänu vari-DOM-i sees olevale elemendile.

Kas teil on see kõik? Suurepärane, vaatame mõne näitega, kuidas need töötavad.

Näide: lubage tööriistaspikrid kõikjal

Üks viis lehe kõigi tööriistavihjete lähtestamiseks on valida need nende data-bs-toggleatribuudi järgi:

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

Näited

Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.

Hõljutage kursorit allolevate nuppude kohal, et näha nelja tööriistaspikri suunda: ülemine, parem, alumine ja vasak. Kui kasutate RTL-is Bootstrapi, siis juhiseid peegeldatakse.

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

Ja kohandatud HTML-iga lisatud:

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

Sass

Muutujad

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

Kasutamine

Tööriistavihje pistikprogramm loob nõudmisel sisu ja märgistuse ning asetab vaikimisi vihjed nende päästikuelemendi järele.

Käivitage kohtspikker JavaScripti kaudu:

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

Märgistus

Tööriistaspikri nõutav märgistus on ainult dataatribuut ja titleHTML-elemendil, mille kohta soovite vihjet, on. Tööriistaspikri loodud märgistus on üsna lihtne, kuigi see nõuab positsiooni (vaikimisi topon pistikprogrammi poolt määratud).

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

Keelatud elemendid

Atribuudiga elemendid disabledei ole interaktiivsed, mis tähendab, et kasutajad ei saa kohtspikri (või hüpikakna) käivitamiseks teravustada, hõljutada või klõpsata. Lahendusena võiksite käivitada tööriistaspikri ümbrisest <div>või <span>ideaaljuhul klaviatuurile teravustatavast, kasutades 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>

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-bs-, nagu data-bs-animation="". Andmeatribuutide kaudu suvandite edastamisel muutke kindlasti valiku nime täpitüüp camelCase asemel kebab-case. Näiteks kasutage selle asemel data-bs-customClass="beautifier", et kasutada data-bs-custom-class="beautifier".

Funktsiooni kasutamine koospopperConfig

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

meetodid

näidata

Näitab elemendi kohtspikri. Naaseb helistaja juurde enne, kui vihje on tegelikult näidatud (st enne shown.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks. Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.

tooltip.show()

peita

Peidab elemendi kohtspikri. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult peidetud (st enne hidden.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.

tooltip.hide()

lüliti

Lülitab elemendi kohtspikri sisse/välja. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult näidatud või peidetud (st enne shown.bs.tooltipvõi hidden.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.

tooltip.toggle()

käsutada

Peidab ja hävitab elemendi vihje (eemaldab DOM-elemendil salvestatud andmed). Delegeerimist kasutavaid tööriistavihjeid (mis luuakse suvandiga selector) ei saa järeltulijate päästikuelementide puhul eraldi hävitada.

tooltip.dispose()

lubada

Annab elemendi kohtspikrile võimaluse kuvada. Tööriistad on vaikimisi lubatud.

tooltip.enable()

keelata

Eemaldab elemendi kohtspikri kuvamise võimaluse. Tööriistavihjet saab kuvada ainult siis, kui see on uuesti lubatud.

tooltip.disable()

lülita Lubatud

Lülitab elemendi kohtspikri kuvamise või peitmise võimaluse.

tooltip.toggleEnabled()

värskendada

Värskendab elemendi kohtspikri asukohta.

tooltip.update()

getInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud kohtspikri eksemplari

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

getOrCreateInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud tööriistaspikri eksemplari või luua uue juhul, kui seda ei lähtestatud

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

Sündmused

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

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

tooltip.hide()