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/ gebruiken bootstrap.bundle.jsdie Popper 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.
• 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-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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-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-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)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Methoden:

$().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 de titel en inhoud beide 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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})