Popovers

Overzicht

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

• Popovers 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 popovers te laten werken!
• Popovers vereisen de tooltip-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.

Voorbeeld: overal popovers inschakelen

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Voorbeeld: de containeroptie gebruiken

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.

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

Voorbeeld

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" 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 uitgelijnd. Routebeschrijvingen worden gespiegeld bij gebruik van Bootstrap in RTL.

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

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" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.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>

Sass

Variabelen

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Gebruik

Popovers inschakelen via JavaScript:

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

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

Methoden:

show

Onthult de popover van een element. Keert terug naar de beller voordat de popover daadwerkelijk is getoond (dwz voordat de shown.bs.popovergebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de popover. Popovers waarvan de titel en inhoud beide nul zijn, worden nooit weergegeven.

myPopover.show()

verbergen

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

myPopover.hide()

schakelaar

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

myPopover.toggle()

weggooien

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

myPopover.dispose()

inschakelen

Geeft de popover van een element de mogelijkheid om te worden weergegeven. Popovers zijn standaard ingeschakeld.

myPopover.enable()

uitzetten

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

myPopover.disable()

toggleIngeschakeld

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

myPopover.toggleEnabled()

update

Werkt de positie van de popover van een element bij.

myPopover.update()

getInstance

Statische methode waarmee u de popover-instantie kunt koppelen aan een DOM-element

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

getOrCreateInstance

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

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

Evenementen

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