Knopinfo

Overzicht

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

• Tooltips vertrouwen op de 3rd party bibliotheek Popper voor positionering. U moet popper.min.js vóór bootstrap.js opnemen of bootstrap.bundle.min.js/ gebruiken bootstrap.bundle.jsdie Popper bevat om tooltips te laten werken!
• 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.

Voorbeeld: Knopinfo overal inschakelen

Een manier om alle knopinfo op een pagina te initialiseren, is door ze op hun data-bs-toggleattribuut te selecteren:

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

Voorbeelden

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

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

En met aangepaste HTML toegevoegd:

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

Met een SVG:

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

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Gebruik

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

Activeer de knopinfo 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

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

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-bs-, zoals in data-bs-animation="". 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 plaats data-bs-customClass="beautifier"van data-bs-custom-class="beautifier".

Functie gebruiken metpopperConfig

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

Methoden:

show

Onthult de tooltip van een element. Keert terug naar de beller voordat de tooltip daadwerkelijk is getoond (dwz voordat de shown.bs.tooltipgebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip. Knopinfo met titels van lengte nul worden nooit weergegeven.

tooltip.show()

verbergen

Verbergt de knopinfo van een element. Keert terug naar de beller voordat de knopinfo daadwerkelijk is verborgen (dwz voordat de hidden.bs.tooltipgebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.

tooltip.hide()

schakelaar

Schakelt de knopinfo van een element in. Keert terug naar de beller voordat de tooltip daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.tooltipof hidden.bs.tooltip-gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.

tooltip.toggle()

weggooien

Verbergt en vernietigt de tooltip van een element (verwijdert opgeslagen gegevens op het DOM-element). Tooltips die delegatie gebruiken (die zijn gemaakt met de selectoroptie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.

tooltip.dispose()

inschakelen

Geeft de tooltip van een element de mogelijkheid om te worden weergegeven. Knopinfo is standaard ingeschakeld.

tooltip.enable()

uitzetten

Verwijdert de mogelijkheid om de knopinfo van een element weer te geven. De knopinfo kan alleen worden weergegeven als deze opnieuw wordt ingeschakeld.

tooltip.disable()

toggleIngeschakeld

Schakelt de mogelijkheid om de knopinfo van een element te tonen of te verbergen.

tooltip.toggleEnabled()

update

Werkt de positie van de knopinfo van een element bij.

tooltip.update()

getInstance

Statische methode waarmee u de tooltip-instantie kunt krijgen die is gekoppeld aan een DOM-element

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

getOrCreateInstance

Statische methode waarmee u de tooltip-instantie kunt krijgen die is gekoppeld aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd

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

Evenementen

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

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

tooltip.hide()