Popovers

Overzicht

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

• Popovers 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.
• Popovers vereisen de popover-plug- in als afhankelijkheid.
• Popovers zijn opt-in om prestatieredenen, dus u moet ze zelf initialiseren .
• Nullengte titleen contentwaarden zullen nooit een popover laten zien.
• Specificeer container: 'body'om weergaveproblemen in complexere componenten te voorkomen (zoals onze invoergroepen, knopgroepen, enz.).
• Het activeren van popovers op verborgen elementen werkt niet.
• Popovers voor .disabledof disabledelementen moeten worden geactiveerd op een wrapper-element.
• Wanneer geactiveerd door ankers die over meerdere lijnen lopen, worden popovers gecentreerd tussen de totale breedte van de ankers. Gebruik .text-nowrapop uw <a>s om dit gedrag te voorkomen.
• Popovers moeten worden verborgen voordat de bijbehorende elementen uit het DOM zijn verwijderd.
• Popovers kunnen worden geactiveerd dankzij een element in een schaduw-DOM.

Blijf lezen om te zien hoe popovers werken met enkele voorbeelden.

Voorbeelden

Popovers inschakelen

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

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

Live demonstratie

We gebruiken JavaScript vergelijkbaar met het bovenstaande fragment om de volgende live popover weer te geven. Titels worden ingesteld via data-bs-titleen de inhoud van de inhoud wordt ingesteld via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Vier richtingen

Er zijn vier opties beschikbaar: boven, rechts, onder en links. Routebeschrijvingen worden gespiegeld bij gebruik van Bootstrap in RTL. Stel data-bs-placementin om van richting te veranderen.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Aangepastcontainer

Als je enkele stijlen op een bovenliggend element hebt die een popover verstoren, moet je een custom specificeren containerzodat de HTML van de popover in plaats daarvan binnen dat element verschijnt. Dit is gebruikelijk in responsieve tabellen, invoergroepen en dergelijke.

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

Een andere situatie waarin u een expliciete gewoonte wilt instellen, containerzijn popovers in een modaal dialoogvenster , om ervoor te zorgen dat de popover zelf aan de modal wordt toegevoegd. Dit is vooral belangrijk voor popovers die interactieve elementen bevatten - modale dialogen zullen de focus vangen, dus tenzij de popover een onderliggend element van de modal is, kunnen gebruikers deze interactieve elementen niet focussen of activeren.

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

Aangepaste popovers

U kunt het uiterlijk van popovers aanpassen met behulp van CSS-variabelen . We hebben een aangepaste klasse ingesteld data-bs-custom-class="custom-popover"waarmee we ons aangepaste uiterlijk kunnen bepalen en gebruiken deze om enkele lokale CSS-variabelen te overschrijven.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Sluiten bij volgende klik

Gebruik de focustrigger om popovers te sluiten bij de volgende klik van de gebruiker op een ander element dan het schakelelement.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

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

Uitgeschakelde elementen

Elementen met het disabledattribuut zijn niet interactief, wat betekent dat gebruikers er niet met de muis over kunnen gaan of erop kunnen klikken om een ​​popover (of knopinfo) te activeren. Als tijdelijke oplossing wil je de popover activeren vanuit een wrapper <div>of <span>, idealiter gemaakt om te focussen op het toetsenbord met tabindex="0".

Voor uitgeschakelde popover-triggers kunt u er ook de voorkeur aan geven data-bs-trigger="hover focus"dat de popover wordt weergegeven als onmiddellijke visuele feedback voor uw gebruikers, omdat ze niet verwachten dat ze op een uitgeschakeld element zullen klikken .

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

CSS

Variabelen

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

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass-variabelen

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

Gebruik

Popovers inschakelen via JavaScript:

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

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

Methoden:

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Evenementen

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