Værktøjstip

Oversigt

Ting at vide, når du bruger værktøjstip-plugin:

• Værktøjstip er afhængige af 3. parts bibliotek Popper til positionering. Du skal inkludere popper.min.js før bootstrap.js eller bruge bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper for at værktøjstip skal virke!
• Værktøjstip er opt-in af ydeevnemæssige årsager, så du skal selv initialisere dem .
• Værktøjstip med titler på nul længde vises aldrig.
• Angiv container: 'body'for at undgå gengivelse af problemer i mere komplekse komponenter (såsom vores inputgrupper, knapgrupper osv.).
• At udløse værktøjstip på skjulte elementer vil ikke fungere.
• Værktøjstip til .disabledeller disabledelementer skal udløses på et indpakningselement.
• Når de udløses fra hyperlinks, der spænder over flere linjer, vil værktøjstip blive centreret. Brug white-space: nowrap;på dine <a>s for at undgå denne adfærd.
• Værktøjstip skal skjules, før deres tilsvarende elementer er blevet fjernet fra DOM.
• Værktøjstip kan udløses takket være et element inde i en skygge-DOM.

Har du alt det? Godt, lad os se, hvordan de fungerer med nogle eksempler.

Eksempel: Aktiver værktøjstip overalt

En måde at initialisere alle værktøjstip på en side på ville være at vælge dem efter deres data-bs-toggleegenskab:

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 nedenstående links for at se værktøjstip:

Hold markøren over knapperne nedenfor for at se de fire værktøjstip-retninger: top, højre, bund og venstre. Retninger spejles, når du bruger 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 tilføjet:

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

Brug

Værktøjstip-pluginnet genererer indhold og opmærkning efter behov og placerer som standard værktøjstip efter deres triggerelement.

Udløs værktøjstippet 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 markering for et værktøjstip er kun en dataattribut, og titlepå HTML-elementet ønsker du at have et værktøjstip. Den genererede markering af et værktøjstip er ret enkel, selvom den kræver en position (som standard indstillet til topaf 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>

Deaktiverede elementer

Elementer med disabledattributten er ikke interaktive, hvilket betyder, at brugere ikke kan fokusere, svæve eller klikke på dem for at udløse et værktøjstip (eller popover). Som en løsning vil du gerne udløse værktøjstippet fra en indpakning <div>eller <span>, ideelt lavet tastaturfokuserbart ved hjælp af 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>

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-, som i data-bs-animation="". Sørg for at ændre sagstypen for indstillingsnavnet fra camelCase til kebab-case, når du videregiver mulighederne via dataattributter. Brug f.eks. i stedet for at data-bs-customClass="beautifier"bruge data-bs-custom-class="beautifier".

Bruger funktion medpopperConfig

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

Metoder

at vise

Viser et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist (dvs. før shown.bs.tooltiphændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip. Værktøjstip med titler på nul længde vises aldrig.

tooltip.show()

skjule

Skjuler et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip rent faktisk er blevet skjult (dvs. før hidden.bs.tooltiphændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.

tooltip.hide()

skifte

Skifter et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.tooltipeller hidden.bs.tooltipindtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.

tooltip.toggle()

bortskaffe

Skjuler og ødelægger et elements værktøjstip (fjerner lagrede data på DOM-elementet). Værktøjstip, der bruger delegering (som oprettes ved hjælp af selectorindstillingen ), kan ikke destrueres individuelt på efterkommer-triggerelementer.

tooltip.dispose()

aktivere

Giver et elements værktøjstip mulighed for at blive vist. Værktøjstip er aktiveret som standard.

tooltip.enable()

deaktivere

Fjerner muligheden for, at et elements værktøjstip vises. Værktøjstippet vil kun kunne vises, hvis det er genaktiveret.

tooltip.disable()

toggleAktiveret

Skifter muligheden for, at et elements værktøjstip vises eller skjules.

tooltip.toggleEnabled()

opdatering

Opdaterer placeringen af ​​et elements værktøjstip.

tooltip.update()

getInstance

Statisk metode, som giver dig mulighed for at få værktøjstip-instansen tilknyttet et DOM-element

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

getOrCreateInstance

Statisk metode, som giver dig mulighed for at få værktøjstip-instansen tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret

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

Begivenheder

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

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

tooltip.hide()