Source

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 externe bibliotheek Popper.js voor positionering. U moet popper.min.js vóór bootstrap.js opnemen of bootstrap.bundle.min.js/ gebruiken bootstrap.bundle.jsdie Popper.js bevat om popovers te laten werken!
  • Popovers vereisen de tooltip-plug- in als afhankelijkheid.
  • Als u ons JavaScript vanaf de bron bouwt, isutil.js .
  • 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.

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-toggleattribuut te selecteren:

$(function () {
  $('[data-toggle="popover"]').popover()
})

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Voorbeeld

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

Vier richtingen

Er zijn vier opties beschikbaar: boven, rechts, onder en links uitgelijnd.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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.

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 tabindexattribuut opnemen.

Niet-toegestane popover 
<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>
$('.popover-dismiss').popover({
  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 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>

Gebruik

Popovers inschakelen via JavaScript:

$('#example').popover(options)

Opties

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: container: 'body'. Deze optie is met name handig omdat u de popover in de stroom van het document in de buurt van het activerende element kunt plaatsen - waardoor wordt voorkomen dat de popover van het activerende element wegzweeft tijdens het formaat van het venster.
inhoud tekenreeks | element | functie ''

Standaard inhoudswaarde als data-contentkenmerk niet aanwezig is.

Als een functie is opgegeven, wordt deze aangeroepen met de thisreferentieset naar het element waaraan de popover is gekoppeld.
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:delay: { "show": 500, "hide": 100 }
html booleaans vals HTML invoegen in de popover. Indien onwaar, wordt de methode van jQuery textgebruikt 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 autois opgegeven, zal het de popover dynamisch heroriënteren.

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 thiscontext is ingesteld op de popover-instantie.
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 titleworden in de .popover-header.

De popover's contentworden in de .popover-body.

.arrowwordt de pijl van de popover.

Het buitenste wrapper-element moet de .popoverclass.
titel tekenreeks | element | functie ''

Standaardtitelwaarde als titleattribuut niet aanwezig is.

Als een functie is opgegeven, wordt deze aangeroepen met de thisreferentieset naar het element waaraan de popover is gekoppeld.
trekker snaar 'Klik' Hoe popover wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. manualkan 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.

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 .

Raadpleeg onze JavaScript-documentatie voor meer informatie.

$().popover(options)

Initialiseert popovers voor een elementverzameling.

.popover('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 zowel de titel als de inhoud nul zijn, worden nooit weergegeven.

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

Werkt de positie van de popover van een element bij.

$('#element').popover('update')

Evenementen

Evenementtype Beschrijving
show.bs.popover Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode 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 hideinstantiemethode 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.popovergebeurtenis wanneer de popover-sjabloon is toegevoegd aan de DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})