Bootstrap Popover-plug-in
De Popover-plug-in
De Popover-plug-in 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.
Tip: Plug-ins kunnen afzonderlijk worden toegevoegd (met behulp van het individuele "popover.js"-bestand van Bootstrap), of allemaal tegelijk (met "bootstrap.js" of "bootstrap.min.js").
Een 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>
Tip: U kunt ook het attribuut voor gegevensplaatsing gebruiken met de waarde "auto", waarmee de browser de positie van de popover kan bepalen. Als de waarde bijvoorbeeld "auto left" is, wordt de popover indien mogelijk aan de linkerkant weergegeven, anders aan de rechterkant.
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 .