Työkaluvinkit

Yleiskatsaus

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

• Työkaluvihjeiden paikannus perustuu kolmannen osapuolen Popper -kirjastoon. Sinun on lisättävä popper.min.js ennen bootstrap.js, tai käytä sellaista, bootstrap.bundle.min.jsjoka sisältää Popperin.
• 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.

Esimerkkejä

Ota työkaluvihjeet käyttöön

Kuten edellä mainittiin, työkaluvihjeet on alustettava ennen kuin niitä voidaan käyttää. Yksi tapa alustaa kaikki sivulla olevat työkaluvihjeet olisi valita ne niiden data-bs-togglemääritteen mukaan, kuten:

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

Työkaluvinkkejä linkeissä

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

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

Mukautetut työkaluvinkit

Voit mukauttaa työkaluvihjeiden ulkoasua CSS-muuttujien avulla . Asetamme mukautetun luokan data-bs-custom-class="custom-tooltip"mukautetun ulkoasun laajuuteen ja käytämme sitä paikallisen CSS-muuttujan ohittamiseen.

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

Ohjeet

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

Ja mukautettu HTML lisätty:

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

CSS

Muuttujat

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa työkaluvinkit käyttävät nyt paikallisia CSS-muuttujia .tooltiptehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

  --#{$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 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:                    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

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:

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

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

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

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Käytä toimintoa kanssapopperConfig

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

menetelmät

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

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

Tapahtumat

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

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

tooltip.hide()