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 en bootstrap.bundle.min.jssom innehåller Popper.
• 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

Som nämnts ovan måste du initialisera verktygstips innan de kan användas. Ett sätt att initiera alla verktygstips på en sida skulle vara att välja dem efter deras data-bs-toggleattribut, som så:

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

Verktygstips på länkar

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

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

Anpassade verktygstips

Du kan anpassa utseendet på verktygstips med hjälp av CSS-variabler . Vi ställer in en anpassad klass med data-bs-custom-class="custom-tooltip"för att omfånga vårt anpassade utseende och använder den för att åsidosätta en lokal CSS-variabel.

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

Vägbeskrivning

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

Och med anpassad HTML tillagd:

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

Med en SVG:

CSS

Variabler

Som en del av Bootstraps utvecklande CSS-variabler använder verktygstips nu lokala CSS-variabler .tooltipför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

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

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:

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

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

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

alternativ

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". 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 data-bs-custom-class="beautifier"istället för data-bs-customClass="beautifier".

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

Använder funktion medpopperConfig

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

Metoder

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

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

evenemang

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

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

tooltip.hide()