Popovers
Documentatie en voorbeelden voor het toevoegen van Bootstrap-popovers, zoals die in iOS, aan elk element op uw site.
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
/ gebruikenbootstrap.bundle.js
die 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
title
encontent
waarden 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
.disabled
ofdisabled
elementen 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-nowrap
op 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.
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
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-toggle
attribuut 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 container
optie gebruiken
Als je enkele stijlen op een bovenliggend element hebt die een popover verstoren, moet je een custom specificeren container
zodat 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 focus
trigger om popovers te sluiten bij de volgende klik van de gebruiker op een ander element dan het schakelelement.
Specifieke opmaak vereist voor afwijzen bij volgende klik
Voor correct cross-browser en cross-platform gedrag moet u de <a>
tag gebruiken, niet de <button>
tag, en moet u ook een tabindex
attribuut opnemen.
<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 disabled
attribuut 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)
Popovers laten werken voor gebruikers van toetsenborden en ondersteunende technologie
Om toetsenbordgebruikers in staat te stellen uw popovers te activeren, moet u ze alleen toevoegen aan HTML-elementen die traditioneel toetsenbordgericht en interactief zijn (zoals koppelingen of formulierbesturingselementen). Hoewel willekeurige HTML-elementen (zoals <span>
s) focusseerbaar kunnen worden gemaakt door het tabindex="0"
attribuut toe te voegen, voegt dit mogelijk vervelende en verwarrende tabstops toe aan niet-interactieve elementen voor toetsenbordgebruikers, en de meeste ondersteunende technologieën kondigen momenteel de inhoud van de popover niet aan in deze situatie . Vertrouw er bovendien niet alleen op hover
als de trigger voor uw popovers, omdat dit het onmogelijk maakt om ze te activeren voor toetsenbordgebruikers.
Hoewel u met deze optie uitgebreide, gestructureerde HTML in popovers kunt invoegen, html
raden we u ten zeerste aan om geen overmatige hoeveelheid inhoud toe te voegen. De manier waarop popovers momenteel werken, is dat, zodra ze worden weergegeven, hun inhoud is gekoppeld aan het trigger-element met het aria-describedby
attribuut. Als gevolg hiervan zal de volledige inhoud van de popover worden aangekondigd aan gebruikers van ondersteunende technologie als één lange, ononderbroken stream.
Bovendien, hoewel het mogelijk is om ook interactieve bedieningselementen (zoals formulierelementen of koppelingen) in uw popover op te nemen (door deze elementen toe te voegen aan de allowList
toegestane attributen en tags), moet u er rekening mee houden dat de popover momenteel de focusvolgorde van het toetsenbord niet beheert. Wanneer een toetsenbordgebruiker een popover opent, blijft de focus op het activerende element, en aangezien de popover meestal niet onmiddellijk de trigger in de structuur van het document volgt, is er geen garantie dat vooruit gaan/drukkenTABzal een toetsenbordgebruiker naar de popover zelf verplaatsen. Kortom, het simpelweg toevoegen van interactieve bedieningselementen aan een popover maakt deze bedieningselementen waarschijnlijk onbereikbaar/onbruikbaar voor toetsenbordgebruikers en gebruikers van ondersteunende technologieën, of zorgt op zijn minst voor een onlogische algemene focusvolgorde. Overweeg in deze gevallen om in plaats daarvan een modaal dialoogvenster te gebruiken.
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"
.
sanitize
,
sanitizeFn
, en
allowList
niet kunnen worden geleverd met gegevensattributen.
Naam | Type | Standaard | Beschrijving |
---|---|---|---|
animation |
booleaans | true |
Pas een CSS-vervagingsovergang toe op de popover |
container |
tekenreeks | element | vals | false |
Voegt de popover toe aan een specifiek element. Voorbeeld: |
content |
tekenreeks | element | functie | '' |
Standaard inhoudswaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
delay |
nummer | object | 0 |
Vertraging bij het tonen en verbergen van de popover (ms) - is niet van toepassing op het handmatige triggertype Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven Objectstructuur is: |
html |
booleaans | false |
HTML invoegen in de popover. Indien onwaar, wordt innerText de eigenschap gebruikt om inhoud in de DOM in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen. |
placement |
tekenreeks | functie | 'right' |
Hoe de popover te plaatsen - auto | naar boven | onderaan | links | Rechtsaf. Wanneer een functie wordt gebruikt om de plaatsing te bepalen, wordt deze aangeroepen met het popover-DOM-knooppunt als het eerste argument en het activerende element DOM-knooppunt als het tweede. De |
selector |
tekenreeks | vals | false |
Als er een selector is, worden popover-objecten gedelegeerd aan de opgegeven doelen. In de praktijk wordt dit gebruikt om dynamische HTML-inhoud popovers toe te laten voegen. Zie dit en een informatief voorbeeld . |
template |
snaar | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Basis-HTML die moet worden gebruikt bij het maken van de popover. De popover's De popover's
Het buitenste wrapper-element moet de |
title |
tekenreeks | element | functie | '' |
Standaardtitelwaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
trigger |
snaar | 'click' |
Hoe popover wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. manual kan niet worden gecombineerd met een andere trigger. |
fallbackPlacements |
reeks | ['top', 'right', 'bottom', 'left'] |
Definieer fallback-plaatsingen door een lijst met plaatsingen in een array op te geven (in volgorde van voorkeur). Raadpleeg voor meer informatie de gedragsdocumenten van Popper |
boundary |
tekenreeks | element | 'clippingParents' |
Overloopbeperkingsgrens van de popover (alleen van toepassing op de preventOverflow-modifier van Popper). Standaard is 'clippingParents' en kan het een HTMLElement-referentie accepteren (alleen via JavaScript). Voor meer informatie raadpleegt u Popper's detectOverflow docs . |
customClass |
tekenreeks | functie | '' |
Voeg klassen toe aan de popover wanneer deze wordt weergegeven. Houd er rekening mee dat deze klassen worden toegevoegd naast de klassen die in de sjabloon zijn gespecificeerd. Om meerdere klassen toe te voegen, scheidt u ze met spaties: U kunt ook een functie doorgeven die een enkele tekenreeks moet retourneren met extra klassenamen. |
sanitize |
booleaans | true |
Schakel de desinfectie in of uit. Indien geactiveerd 'template' , 'content' worden 'title' de opties gezuiverd. Zie de sectie over ontsmettingsmiddelen in onze JavaScript-documentatie . |
allowList |
object | Standaardwaarde | Object dat toegestane attributen en tags bevat |
sanitizeFn |
null | functie | null |
Hier kunt u uw eigen ontsmettingsfunctie leveren. Dit kan handig zijn als u liever een speciale bibliotheek gebruikt om op te schonen. |
offset |
reeks | tekenreeks | functie | [0, 8] |
Offset van de popover ten opzichte van zijn doel. U kunt een tekenreeks in gegevensattributen doorgeven met door komma's gescheiden waarden zoals: Wanneer een functie wordt gebruikt om de offset te bepalen, wordt deze aangeroepen met een object dat de popper-plaatsing, de referentie en popper-rects als eerste argument bevat. Het triggerelement DOM-knooppunt wordt doorgegeven als het tweede argument. De functie moet een array teruggeven met twee getallen: . Raadpleeg voor meer informatie de offsetdocumenten van Popper . |
popperConfig |
null | object | functie | null |
Zie de configuratie van Popper om de standaard Popper-configuratie van Bootstrap te wijzigen . Wanneer een functie wordt gebruikt om de Popper-configuratie te maken, wordt deze aangeroepen met een object dat de standaard Popper-configuratie van Bootstrap bevat. Het helpt u de standaard te gebruiken en samen te voegen met uw eigen configuratie. De functie moet een configuratieobject voor Popper teruggeven. |
Gegevensattributen voor individuele popovers
Opties voor individuele popovers kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.
Functie gebruiken metpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methoden:
Asynchrone methoden en overgangen
Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .
show
Onthult de popover van een element. Keert terug naar de beller voordat de popover daadwerkelijk is getoond (dwz voordat de shown.bs.popover
gebeurtenis 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.popover
gebeurtenis 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.popover
of 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 selector
optie ) 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
Evenementtype | Beschrijving |
---|---|
show.bs.popover | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode wordt aangeroepen. |
getoond.bs.popover | Deze gebeurtenis wordt geactiveerd wanneer de popover zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). |
verberg.bs.popover | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hide instantiemethode is aangeroepen. |
verborgen.bs.popover | Deze gebeurtenis wordt geactiveerd wanneer de popover is verborgen voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). |
ingevoegd.bs.popover | Deze gebeurtenis wordt geactiveerd na de show.bs.popover gebeurtenis wanneer de popover-sjabloon is toegevoegd aan de DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})