Bootstrap 4 Popover
Bootstrap 4 Popover
De component Popover is vergelijkbaar met tooltips; het is een pop-upvenster dat verschijnt wanneer de gebruiker op een element klikt. Het verschil is dat de popover veel meer inhoud kan bevatten.
Toggle popoverEen popover maken
Voeg het data-toggle="popover"
attribuut aan een element toe om een popover te maken.
Gebruik het titleattribuut om de koptekst van de popover te specificeren en gebruik het data-contentattribuut om de tekst op te geven die in de hoofdtekst van de popover moet worden weergegeven:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Opmerking: Popovers moeten worden geïnitialiseerd met jQuery: selecteer het opgegeven element en roep de popover()methode aan.
Met de volgende code worden alle popovers in het document ingeschakeld:
Voorbeeld
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Popovers positioneren
Standaard verschijnt de popover aan de rechterkant van het element.
Gebruik het data-placementattribuut om de positie van de popover boven, onder, links of rechts van het element in te stellen:
Voorbeeld
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Opmerking: de plaatsingskenmerken werken niet zoals u verwacht als er niet genoeg ruimte voor is. Bijvoorbeeld: als u de bovenste plaatsing bovenaan een pagina gebruikt (waar er geen ruimte voor is), wordt in plaats daarvan de popover weergegeven onder het element of aan de rechterkant (waar er ruimte voor is).
Popovers sluiten
Standaard wordt de popover gesloten wanneer u opnieuw op het element klikt. U kunt echter het data-trigger="focus"attribuut gebruiken dat de popover sluit wanneer u buiten het element klikt:
Voorbeeld
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Tip: Als u wilt dat de popover wordt weergegeven wanneer u de muisaanwijzer over het element beweegt, gebruikt u het data-triggerattribuut met de waarde "hover":
Voorbeeld
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Volledige Bootstrap Popover-referentie
Ga voor een volledige referentie van alle popover-opties, -methoden en -gebeurtenissen naar onze Bootstrap JS Popover-referentie .