Verktøytips

Oversikt

Ting å vite når du bruker verktøytips-pluginen:

• Verktøytips er avhengige av tredjepartsbiblioteket Popper for posisjonering. Du må inkludere popper.min.js før bootstrap.js eller bruke bootstrap.bundle.min.js/ bootstrap.bundle.jssom inneholder Popper for at verktøytips skal fungere!
• Verktøytips er opt-in av ytelsesårsaker, så du må initialisere dem selv .
• Verktøytips med null-lengde titler vises aldri.
• Spesifiser container: 'body'for å unngå å gjengi problemer i mer komplekse komponenter (som våre inndatagrupper, knappegrupper osv.).
• Å utløse verktøytips på skjulte elementer vil ikke fungere.
• Verktøytips for .disabledeller disabledelementer må utløses på et innpakningselement.
• Når de utløses fra hyperkoblinger som spenner over flere linjer, vil verktøytips bli sentrert. Bruk white-space: nowrap;på din <a>s for å unngå denne oppførselen.
• Verktøytips må skjules før de tilhørende elementene er fjernet fra DOM.
• Verktøytips kan utløses takket være et element inne i en skygge-DOM.

Har du alt det? Flott, la oss se hvordan de fungerer med noen eksempler.

Eksempel: Aktiver verktøytips overalt

En måte å initialisere alle verktøytips på en side på er å velge dem etter deres data-bs-toggleattributt:

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

Eksempler

Hold markøren over koblingene nedenfor for å se verktøytips:

Hold markøren over knappene nedenfor for å se de fire verktøytipsretningene: topp, høyre, bunn og venstre. Retningene speiles når du bruker Bootstrap i 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 med tilpasset HTML lagt til:

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

Med en SVG:

Sass

Variabler

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

Bruk

Verktøytips-pluginen genererer innhold og markering på forespørsel, og plasserer som standard verktøytips etter utløserelementet.

Utløs verktøytipset via 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

Den nødvendige markeringen for et verktøytips er kun et dataattributt og titlepå HTML-elementet ønsker du å ha et verktøytips. Den genererte markeringen av et verktøytips er ganske enkel, selv om den krever en posisjon (som standard satt til topav plugin).

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

Deaktiverte elementer

Elementer med disabledattributtet er ikke interaktive, noe som betyr at brukere ikke kan fokusere, holde musepekeren eller klikke på dem for å utløse et verktøytips (eller popover). Som en løsning vil du trigge verktøytipset fra en wrapper <div>eller <span>, ideelt gjort tastaturfokuserbar ved hjelp av 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>

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-, som i data-bs-animation="". Sørg for å endre sakstype for alternativnavnet fra camelCase til kebab-case når du sender alternativene via dataattributter. Bruk for eksempel i stedet for å data-bs-customClass="beautifier"bruke data-bs-custom-class="beautifier".

Bruker funksjon medpopperConfig

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

Metoder

forestilling

Avslører et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist (dvs. før shown.bs.tooltiphendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset. Verktøytips med null-lengde titler vises aldri.

tooltip.show()

gjemme seg

Skjuler et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt skjult (dvs. før hidden.bs.tooltiphendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.

tooltip.hide()

veksle

Veksler på verktøytipset til et element. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.tooltipeller hidden.bs.tooltipinntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.

tooltip.toggle()

kaste

Skjuler og ødelegger et elements verktøytips (fjerner lagrede data på DOM-elementet). Verktøytips som bruker delegering (som opprettes ved å bruke selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

tooltip.dispose()

muliggjøre

Gir et elements verktøytips muligheten til å bli vist. Verktøytips er aktivert som standard.

tooltip.enable()

deaktiver

Fjerner muligheten for å vise et elements verktøytips. Verktøytipset vil kun kunne vises hvis det er aktivert på nytt.

tooltip.disable()

toggleEnabled

Veksler på muligheten for at et elements verktøytips skal vises eller skjules.

tooltip.toggleEnabled()

Oppdater

Oppdaterer posisjonen til et elements verktøytips.

tooltip.update()

getInstance

Statisk metode som lar deg få verktøytipsforekomsten knyttet til et DOM-element

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

getOrCreateInstance

Statisk metode som lar deg få verktøytipsforekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert

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

arrangementer

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

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

tooltip.hide()