Popovers

Overzicht

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

• Popovers 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.
• Popovers hebben de popover-plugin als afhankelijkheid nodig.
• Popovers zijn om prestatieredenen opt-in, dus je moet ze zelf initialiseren.
• Bij title- en content-waarden van lengte nul verschijnt er nooit een popover.
• Geef container: 'body' op om weergaveproblemen in complexere componenten (zoals onze input groups, button groups enz.) te voorkomen.
• Popovers activeren op verborgen elementen werkt niet.
• Popovers voor .disabled- of disabled-elementen moeten via een omhullend element worden geactiveerd.
• Wanneer ze vanuit ankers worden geactiveerd die over meerdere regels lopen, worden popovers gecentreerd ten opzichte van de totale breedte van de ankers. Gebruik .text-nowrap op je <a>s om dat gedrag te voorkomen.
• Popovers moeten verborgen zijn voordat de bijbehorende elementen uit de DOM worden verwijderd.
• Popovers kunnen worden geactiveerd door een element binnen een shadow DOM.

Lees verder om met een paar voorbeelden te zien hoe popovers werken.

Voorbeelden

Popovers inschakelen

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Live demo

We gebruiken JavaScript die lijkt op het fragment hierboven om de volgende live popover weer te geven. Titels stel je in via data-bs-title en de inhoud via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover-titel" data-bs-content="En hier staat geweldige content. Heel boeiend. Toch?">Klik om de popover te schakelen</button>

Vier richtingen

Er zijn vier opties beschikbaar: boven, rechts, onder en links. De richtingen worden gespiegeld wanneer je Bootstrap in RTL gebruikt. Stel data-bs-placement in om de richting te wijzigen.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover bovenaan">
  Popover bovenaan
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover rechts">
  Popover rechts
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover onderaan">
  Popover onderaan
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover links">
  Popover links
</button>

Eigen container

Wanneer een bovenliggend element stijlen heeft die een popover in de weg zitten, geef je een eigen container op zodat de HTML van de popover binnen dat element verschijnt. Dat komt vaak voor bij responsieve tabellen, input groups en dergelijke.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Een andere situatie waarin je een expliciete eigen container wilt instellen, zijn popovers binnen een modal-dialoogvenster, om te zorgen dat de popover zelf aan de modal wordt toegevoegd. Dat is vooral belangrijk voor popovers met interactieve elementen: modal-dialoogvensters houden de focus vast, dus tenzij de popover een kindelement van de modal is, kunnen gebruikers die interactieve elementen niet focussen of activeren.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Eigen popovers

Nieuw in v5.2.0

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

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

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

Sluiten bij de volgende klik

Gebruik de trigger focus om popovers te sluiten zodra de gebruiker op een ander element klikt dan het toggle-element.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Sluitbare popover" data-bs-content="En hier staat geweldige content. Heel boeiend. Toch?">Sluitbare popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Uitgeschakelde elementen

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

Bij uitgeschakelde popover-triggers geef je mogelijk ook de voorkeur aan data-bs-trigger="hover focus", zodat de popover als directe visuele feedback verschijnt; gebruikers verwachten immers niet dat ze op een uitgeschakeld element moeten klikken.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Uitgeschakelde popover">
  <button class="btn btn-primary" type="button" disabled>Uitgeschakelde knop</button>
</span>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken popovers nu lokale CSS-variabelen op .popover, 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/_popover.scss in de Bootstrap-broncode.

Sass-variabelen

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

Gebruik

Schakel popovers in via JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

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 popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // gebruik defaultBsPopperConfig indien nodig...
    // return newPopperConfig
  }
})

Methodes

// getOrCreateInstance-voorbeeld
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Geeft een Bootstrap-popover-instantie terug

// setContent-voorbeeld
myPopover.setContent({
  '.popover-header': 'een andere titel',
  '.popover-body': 'andere content'
})

Gebeurtenissen

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // doe iets...
})