Työkaluvinkit

Yleiskatsaus

Asiat, jotka on hyvä tietää käytettäessä työkaluvihje-laajennusta:

• Työkaluvihjeiden paikannus perustuu kolmannen osapuolen Popper -kirjastoon. Sinun tulee lisätä popper.min.js ennen bootstrap.js:ää tai käyttää bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popperin, jotta työkaluvihjeet toimivat!
• Työkaluvihjeet ovat käytettävissä suorituskykysyistä, joten sinun on alustettava ne itse .
• Työkaluvihjeitä, joiden otsikot ovat nollapituisia, ei koskaan näytetä.
• Määritä container: 'body', jotta vältät hahmonnusongelmia monimutkaisemmissa osissa (kuten syöttöryhmämme, painikeryhmämme jne.).
• Työkaluvihjeiden käynnistäminen piilotetuista elementeistä ei toimi.
• Työkaluvihjeitä .disabledtai disabledelementtejä on käynnistettävä kääreelementissä.
• Kun työkaluvihjeet käynnistetään hyperlinkeistä, jotka kattavat useita rivejä, työkaluvihjeet keskitetään. Vältä tämä käyttäytyminen käyttämällä sitä white-space: nowrap;.<a>
• Työkaluvihjeet on piilotettava ennen kuin niitä vastaavat elementit on poistettu DOM:sta.
• Työkaluvihjeitä voidaan laukaista varjo-DOM:n sisällä olevan elementin ansiosta.

Onko sinulla kaikki tämä? Hienoa, katsotaan kuinka ne toimivat joidenkin esimerkkien avulla.

Esimerkki: Ota työkaluvihjeet käyttöön kaikkialla

Yksi tapa alustaa kaikki sivulla olevat työkaluvihjeet on valita ne niiden data-bs-togglemääritteen perusteella:

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

Esimerkkejä

Vie hiiri alla olevien linkkien päälle nähdäksesi työkaluvinkit:

Vie hiiri alla olevien painikkeiden päälle nähdäksesi neljä työkaluvihjeen suuntaa: ylhäältä, oikealta, alhaalta ja vasemmalta. Ohjeet peilataan käytettäessä Bootstrapia RTL:ssä.

<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 mukautettu HTML lisätty:

<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:llä:

Sass

Muuttujat

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

Käyttö

Työkaluvihje-laajennus luo sisältöä ja merkintöjä pyynnöstä ja sijoittaa työkaluvihjeet oletuksena niiden triggerelementin perään.

Käynnistä työkaluvihje JavaScriptin kautta:

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

Merkintä

Työkaluvihjeen vaadittava merkintä on vain dataattribuutti ja titleHTML-elementissä, johon haluat työkaluvihjeen. Työkaluvihjeen luotu merkintä on melko yksinkertaista, vaikka se vaatii sijainnin (oletusarvoisesti toplaajennuksen asettama).

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

Poistetut elementit

Attribuutilla varustetut elementit disabledeivät ole vuorovaikutteisia, mikä tarkoittaa, että käyttäjät eivät voi tarkentaa, viedä hiiren osoitinta tai napsauttaa niitä käynnistääkseen työkaluvihjeen (tai ponnahdusikkunan). Kiertokeinona sinun kannattaa käynnistää työkaluvihje kääreestä <div>tai <span>ihanteellisesti näppäimistöllä tarkennetusta käyttämällä 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>

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-, kuten kohdassa data-bs-animation="". Muista vaihtaa vaihtoehdon nimen tapaustyyppi camelCase-muotoon kebab-case, kun välität valinnat tietomääritteiden kautta. Käytä esimerkiksi sen sijaan, että data-bs-customClass="beautifier"käytät data-bs-custom-class="beautifier".

Käytä toimintoa kanssapopperConfig

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

menetelmät

näytä

Näyttää elementin työkaluvihjeen. Palaa soittajalle ennen kuin työkaluvihje on todellisuudessa näytetty (eli ennen shown.bs.tooltiptapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä. Työkaluvihjeitä, joiden otsikot ovat nollapituisia, ei koskaan näytetä.

tooltip.show()

piilottaa

Piilottaa elementin työkaluvihjeen. Palaa soittajalle ennen kuin työkaluvihje on todella piilotettu (eli ennen hidden.bs.tooltiptapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä.

tooltip.hide()

vaihtaa

Vaihtaa elementin työkaluvihjeen päälle/pois. Palaa soittajalle ennen kuin työkaluvihje on todellisuudessa näytetty tai piilotettu (eli ennen shown.bs.tooltiptai hidden.bs.tooltiptapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä.

tooltip.toggle()

hävittää

Piilottaa ja tuhoaa elementin työkaluvihjeen (poistaa DOM-elementtiin tallennetut tiedot). Delegointia käyttäviä työkaluvihjeitä (jotka luodaan vaihtoehdolla selector) ei voida tuhota yksitellen jälkeläisissä triggerelementeissä.

tooltip.dispose()

ota käyttöön

Antaa elementin työkaluvihjeelle mahdollisuuden näkyä. Työkaluvihjeet ovat oletuksena käytössä.

tooltip.enable()

Poista käytöstä

Poistaa mahdollisuuden näyttää elementin työkaluvihjettä. Työkaluvinkki voidaan näyttää vain, jos se otetaan uudelleen käyttöön.

tooltip.disable()

toggleEnabled

Vaihtaa elementin työkaluvihjeen näyttämisen tai piilotuksen.

tooltip.toggleEnabled()

päivittää

Päivittää elementin työkaluvihjeen sijainnin.

tooltip.update()

getInstance

Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän työkaluvihje-ilmentymän

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

getOrCreateInstance

Staattinen menetelmä, jonka avulla voit saada työkaluvihje-ilmentymän, joka liittyy DOM-elementtiin, tai luoda uuden, jos sitä ei alustettu

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

Tapahtumat

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

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

tooltip.hide()