Knopinfo

Overzicht

Wat u moet weten bij het gebruik van de tooltip-plug-in:

• Tooltips vertrouwen op de externe bibliotheek Popper voor positionering. U moet popper.min.js vóór opnemen bootstrap.jsof er een gebruiken bootstrap.bundle.min.jsdie Popper bevat.
• Tooltips zijn opt-in om prestatieredenen, dus u moet ze zelf initialiseren .
• Knopinfo met titels met een lengte van nul worden nooit weergegeven.
• Specificeer container: 'body'om weergaveproblemen in complexere componenten te voorkomen (zoals onze invoergroepen, knopgroepen, enz.).
• Het activeren van tooltips op verborgen elementen werkt niet.
• Tooltips voor .disabledof disabledelementen moeten worden geactiveerd op een wrapper-element.
• Wanneer geactiveerd door hyperlinks die meerdere regels overspannen, worden tooltips gecentreerd. Gebruik white-space: nowrap;op uw <a>s om dit gedrag te voorkomen.
• Knopinfo moet worden verborgen voordat de bijbehorende elementen uit het DOM zijn verwijderd.
• Tooltips kunnen worden geactiveerd dankzij een element in een schaduw-DOM.

Heb je dat allemaal? Geweldig, laten we eens kijken hoe ze werken met enkele voorbeelden.

Voorbeelden

Knopinfo inschakelen

Zoals hierboven vermeld, moet u tooltips initialiseren voordat ze kunnen worden gebruikt. Een manier om alle tooltips op een pagina te initialiseren, is door ze op hun data-bs-toggleattribuut te selecteren, zoals:

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

Knopinfo op links

Plaats de muisaanwijzer op de onderstaande links om tooltips te zien:

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

Aangepaste tooltips

U kunt het uiterlijk van knopinfo aanpassen met behulp van CSS-variabelen . We stellen een aangepaste klasse in data-bs-custom-class="custom-tooltip"om ons aangepaste uiterlijk te bepalen en gebruiken deze om een ​​lokale CSS-variabele te overschrijven.

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

Routebeschrijving

Plaats de muisaanwijzer op de onderstaande knoppen om de vier tooltips-richtingen te zien: boven, rechts, onder en links. Routebeschrijvingen worden gespiegeld bij gebruik van Bootstrap in 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>

En met aangepaste HTML toegevoegd:

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

Met een SVG:

CSS

Variabelen

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken tooltips nu lokale CSS .tooltip-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

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

$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

Gebruik

De tooltip-plug-in genereert on-demand inhoud en markeringen en plaatst standaard tooltips na hun trigger-element.

Activeer de knopinfo 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')
})

Markup

De vereiste opmaak voor een tooltip is slechts een dataattribuut en titleop het HTML-element wil je een tooltip hebben. De gegenereerde opmaak van een tooltip is vrij eenvoudig, maar vereist wel een positie (standaard ingesteld topdoor de plug-in).

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

Uitgeschakelde elementen

Elementen met het disabledattribuut zijn niet interactief, wat betekent dat gebruikers niet kunnen focussen, de muisaanwijzer erop kunnen plaatsen of erop kunnen klikken om knopinfo (of popover) te activeren. Als tijdelijke oplossing wilt u de knopinfo activeren vanuit een wrapper <div>of <span>, idealiter gemaakt voor toetsenbordfocus met behulp van 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>

Opties

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Functie gebruiken metpopperConfig

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

Methoden:

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

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

Evenementen

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

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

tooltip.hide()