Tooltips

Overzicht

Dingen om te weten bij het gebruik van de tooltip-plugin:

• Tooltips leunen voor de positionering op de externe bibliotheek Popper. Je moet popper.min.js vóór bootstrap.js opnemen, of één bootstrap.bundle.min.js gebruiken waarin Popper zit.
• Tooltips zijn om prestatieredenen opt-in, dus je moet ze zelf initialiseren.
• Tooltips met een titel van lengte nul worden nooit weergegeven.
• Geef container: 'body' op om weergaveproblemen in complexere componenten (zoals onze input groups, button groups enz.) te voorkomen.
• Tooltips activeren op verborgen elementen werkt niet.
• Tooltips voor .disabled- of disabled-elementen moeten via een omhullend element worden geactiveerd.
• Wanneer ze vanuit hyperlinks over meerdere regels worden geactiveerd, worden tooltips gecentreerd. Gebruik white-space: nowrap; op je <a>s om dat gedrag te voorkomen.
• Tooltips moeten verborgen zijn voordat de bijbehorende elementen uit de DOM worden verwijderd.
• Tooltips kunnen worden geactiveerd door een element binnen een shadow DOM.

Alles duidelijk? Mooi, laten we met een paar voorbeelden kijken hoe ze werken.

Voorbeelden

Tooltips inschakelen

Zoals hierboven vermeld moet je tooltips initialiseren voordat je ze kunt gebruiken. Eén manier om alle tooltips op een pagina te initialiseren is ze via hun data-bs-toggle-attribuut te selecteren, zoals hier:

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

Tooltips op links

Hover over de links hieronder om tooltips te zien:

<p class="muted">Opvultekst om een paar <a href="#" data-bs-toggle="tooltip" data-bs-title="Standaard tooltip">inline links</a> met tooltips te demonstreren. Dit is nu gewoon vulling, niets bijzonders. Content die hier alleen staat om de aanwezigheid van <a href="#" data-bs-toggle="tooltip" data-bs-title="Nog een tooltip">echte tekst</a> na te bootsen. En dat allemaal om je een idee te geven van hoe tooltips eruitzien in praktijksituaties. Hopelijk heb je nu gezien hoe <a href="#" data-bs-toggle="tooltip" data-bs-title="Hier ook nog eentje">deze tooltips op links</a> in de praktijk kunnen werken, zodra je ze op <a href="#" data-bs-toggle="tooltip" data-bs-title="De laatste tip!">je eigen</a> site of project gebruikt.
</p>

Eigen tooltips

Nieuw in v5.2.0

Je kunt het uiterlijk van tooltips aanpassen met CSS-variabelen. We stellen een eigen klasse in met data-bs-custom-class="custom-tooltip" om ons aangepaste uiterlijk af te bakenen, en gebruiken die om een lokale CSS-variabele te overschrijven.

Standaardwaarden: zie site/assets/scss/_component-examples.scss in de Bootstrap-broncode.

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="Deze tooltip bovenaan is via CSS-variabelen van een thema voorzien.">
  Eigen tooltip
</button>

Richtingen

Hover over de knoppen hieronder om de vier tooltip-richtingen te zien: boven, rechts, onder en links. De richtingen worden gespiegeld wanneer je Bootstrap in RTL gebruikt.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip bovenaan">
  Tooltip bovenaan
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip rechts">
  Tooltip rechts
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip onderaan">
  Tooltip onderaan
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip links">
  Tooltip links
</button>

En met eigen HTML toegevoegd:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>met</u> <b>HTML</b>">
  Tooltip met HTML
</button>

Met een SVG:

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken tooltips nu lokale CSS-variabelen op .tooltip, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_tooltip.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Gebruik

De tooltip-plugin genereert content en markup op aanvraag, en plaatst tooltips standaard achter hun trigger-element.

Activeer de tooltip via JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

Markup

De vereiste markup voor een tooltip is alleen een data-attribuut en een title op het HTML-element dat je een tooltip wilt geven. De gegenereerde markup van een tooltip is vrij eenvoudig, al vereist hij wel een positie (standaard door de plugin op top gezet).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Wat tooltip-tekst!">Hover over mij</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Wat tooltip-tekst!
  </div>
</div>

Uitgeschakelde elementen

Elementen met het disabled-attribuut zijn niet interactief, wat betekent dat gebruikers ze niet kunnen focussen, erover kunnen hoveren of erop kunnen klikken om een tooltip (of popover) te activeren. Als tijdelijke oplossing activeer je de tooltip vanuit een omhullende <div> of <span>, idealiter met tabindex="0" focusbaar gemaakt met het toetsenbord.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Uitgeschakelde tooltip">
  <button class="btn btn-primary" type="button" disabled>Uitgeschakelde knop</button>
</span>

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Een functie gebruiken met popperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // gebruik defaultBsPopperConfig indien nodig...
    // return newPopperConfig
  }
})

Methodes

const tooltip = bootstrap.Tooltip.getInstance('#example') // Geeft een Bootstrap-tooltip-instantie terug

// setContent-voorbeeld
tooltip.setContent({ '.tooltip-inner': 'een andere titel' })

Gebeurtenissen

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

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // doe iets...
})

tooltip.hide()