Popovers
Documentatie en voorbeelden voor het toevoegen van Bootstrap-popovers, zoals die in iOS, aan elk element op uw site.
Wat u moet weten bij het gebruik van de popover-plug-in:
- Popovers vertrouwen op de externe bibliotheek Popper.js voor positionering. U moet popper.min.js vóór bootstrap.js opnemen of
bootstrap.bundle.min.js
/ gebruikenbootstrap.bundle.js
die Popper.js bevat om popovers te laten werken! - Popovers vereisen de tooltip-plug- in als afhankelijkheid.
- Als u ons JavaScript vanaf de bron bouwt, is
util.js
. - 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
white-space: nowrap;
op uw<a>
s om dit gedrag te voorkomen. - Popovers moeten worden verborgen voordat de bijbehorende elementen uit het DOM zijn verwijderd.
Blijf lezen om te zien hoe popovers werken met enkele voorbeelden.
Een manier om alle popovers op een pagina te initialiseren, is door ze op hun data-toggle
attribuut te selecteren:
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.
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.
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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
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 wilt u de popover vanuit een wrapper activeren <div>
of de op het uitgeschakelde element <span>
overschrijven .pointer-events
Voor uitgeschakelde popover-triggers kunt u er ook de voorkeur aan geven data-trigger="hover"
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" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Popovers inschakelen via JavaScript:
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-
, zoals in data-animation=""
.
Naam | Type | Standaard | Beschrijving |
---|---|---|---|
animatie | booleaans | WAAR | Pas een CSS-vervagingsovergang toe op de popover |
container | tekenreeks | element | vals | vals | Voegt de popover toe aan een specifiek element. Voorbeeld: |
inhoud | tekenreeks | element | functie | '' | Standaard inhoudswaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
vertraging | 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 | vals | HTML invoegen in de popover. Indien onwaar, wordt de methode van jQuery text gebruikt om inhoud in de DOM in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen. |
plaatsing | tekenreeks | functie | 'Rechtsaf' | 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 | vals | 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 . |
sjabloon | snaar | '<div class="popover" role="tooltip"><div class="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 |
titel | tekenreeks | element | functie | '' | Standaardtitelwaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
trekker | snaar | 'Klik' | 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. |
offset | nummer | snaar | 0 | Offset van de popover ten opzichte van zijn doel. Raadpleeg voor meer informatie de offset -documenten van Popper.js . |
fallbackPlaatsing | tekenreeks | reeks | 'omdraaien' | Sta toe om aan te geven welke positie Popper zal gebruiken bij fallback. Raadpleeg voor meer informatie de gedragsdocumenten van Popper.js |
grens | tekenreeks | element | 'scrollOuder' | Overloopbeperkingsgrens van de popover. Accepteert de waarden van 'viewport' , 'window' , 'scrollParent' of een HTMLElement-referentie (alleen JavaScript). Raadpleeg voor meer informatie de preventOverflow- documenten van Popper.js . |
Gegevensattributen voor individuele popovers
Opties voor individuele popovers kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.
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 .
Raadpleeg onze JavaScript-documentatie voor meer informatie.
Initialiseert popovers voor een elementverzameling.
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 zowel de titel als de inhoud nul zijn, worden nooit weergegeven.
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.
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.
Verbergt en vernietigt de popover van een element. Popovers die delegatie gebruiken (die zijn gemaakt met de selector
optie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.
Geeft de popover van een element de mogelijkheid om te worden weergegeven. Popovers zijn standaard ingeschakeld.
Verwijdert de mogelijkheid om de popover van een element weer te geven. De popover kan alleen worden weergegeven als deze opnieuw wordt ingeschakeld.
Schakelt de mogelijkheid in om de popover van een element te tonen of te verbergen.
Werkt de positie van de popover van een element bij.
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. |