Verktygstips

Översikt

Saker att veta när du använder verktygstipsplugin:

• Verktygstips förlitar sig på tredje parts bibliotek Popper för positionering. Du måste inkludera popper.min.js före bootstrap.js eller använda bootstrap.bundle.min.js/ bootstrap.bundle.jssom innehåller Popper för att verktygstips ska fungera!
• Verktygstips är opt-in av prestandaskäl, så du måste initiera dem själv .
• Verktygstips med noll-längd titlar visas aldrig.
• Ange container: 'body'för att undvika att problem återges i mer komplexa komponenter (som våra indatagrupper, knappgrupper, etc).
• Att trigga verktygstips på dolda element kommer inte att fungera.
• Verktygstips för .disabledeller disabledelement måste utlösas på ett omslagselement.
• När de utlöses från hyperlänkar som sträcker sig över flera rader kommer verktygstips att centreras. Använd white-space: nowrap;på din <a>s för att undvika detta beteende.
• Verktygstips måste döljas innan deras motsvarande element har tagits bort från DOM.
• Verktygstips kan triggas tack vare ett element inuti en skugga DOM.

Har du allt det där? Bra, låt oss se hur de fungerar med några exempel.

Exempel: Aktivera verktygstips överallt

Ett sätt att initiera alla verktygstips på en sida är att välja dem efter deras data-bs-toggleattribut:

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

Exempel

Håll muspekaren över länkarna nedan för att se verktygstips:

Håll muspekaren över knapparna nedan för att se de fyra verktygstipsriktningarna: topp, höger, botten och vänster. Vägbeskrivningarna speglas när du använder 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>

Och med anpassad HTML tillagd:

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

Användande

Verktygstipspluginen genererar innehåll och uppmärkning på begäran och placerar som standard verktygstips efter deras utlösarelement.

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

Pålägg

Den nödvändiga markeringen för ett verktygstips är bara ett dataattribut och titlepå HTML-elementet vill du ha ett verktygstips. Den genererade markeringen av ett verktygstips är ganska enkel, även om den kräver en position (som standard inställd på 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>

Inaktiverade element

Element med disabledattributet är inte interaktiva, vilket innebär att användare inte kan fokusera, hålla muspekaren eller klicka på dem för att utlösa ett verktygstips (eller popover). Som en lösning bör du trigga verktygstipset från ett omslag <div>eller <span>, idealiskt gjort tangentbordsfokuserbart med 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>

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-bs-, som i data-bs-animation="". Se till att ändra fallets typ av alternativnamnet från camelCase till kebab-case när du skickar alternativen via dataattribut. Använd till exempel istället för att data-bs-customClass="beautifier"använda data-bs-custom-class="beautifier".

Använder funktion medpopperConfig

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

Metoder

show

Visar ett elements verktygstips. Återgår till den som ringer innan verktygstipset faktiskt har visats (dvs innan shown.bs.tooltiphändelsen inträffar). Detta anses vara en "manuell" triggning av verktygstipset. Verktygstips med noll-längd titlar visas aldrig.

tooltip.show()

Dölj

Döljer ett elements verktygstips. Återgår till den som ringer innan verktygstipset faktiskt har dolts (dvs innan hidden.bs.tooltiphändelsen inträffar). Detta anses vara en "manuell" triggning av verktygstipset.

tooltip.hide()

växla

Växlar ett elements verktygstips. Återgår till den som ringer innan verktygstipset faktiskt har visats eller dolt (dvs innan händelsen shown.bs.tooltipeller hidden.bs.tooltipinträffar). Detta anses vara en "manuell" triggning av verktygstipset.

tooltip.toggle()

kassera

Döljer och förstör ett elements verktygstips (tar bort lagrad data på DOM-elementet). Verktygstips som använder delegering (som skapas med alternativet selector) kan inte förstöras individuellt på underliggande triggerelement.

tooltip.dispose()

Gör det möjligt

Ger ett elements verktygstips möjligheten att visas. Verktygstips är aktiverade som standard.

tooltip.enable()

inaktivera

Tar bort möjligheten för ett elements verktygstips att visas. Verktygstipset kommer bara att kunna visas om det återaktiveras.

tooltip.disable()

toggleEnabled

Växlar möjligheten för ett elements verktygstips att visas eller döljas.

tooltip.toggleEnabled()

uppdatering

Uppdaterar positionen för ett elements verktygstips.

tooltip.update()

getInstance

Statisk metod som låter dig få verktygstipsinstansen associerad med ett DOM-element

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

getOrCreateInstance

Statisk metod som låter dig få verktygstipsinstansen associerad med ett DOM-element, eller skapa en ny om den inte initierades

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

evenemang

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

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

tooltip.hide()