Bootstrap 5 Pop-up

Pop-up

De Pop-up (Popover) component lijkt op een tooltip; het is een pop-up die verschijnt wanneer de gebruiker op een element klikt. Het verschil is dat een pop-up meer inhoud kan bevatten.

Hoe een pop-up te maken

Om een pop-up te maken, voeg data-bs-toggle="popover" de eigenschap toe aan het element.

Gebruik title De eigenschap definieert de titeltekst van de pop-up en gebruikt data-bs-content De eigenschap definieert de tekst die in de tekst van de pop-up wordt weergegeven:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Pop-up titel" data-bs-content="Enkele inhoud van de pop-up">Schakel pop-up in/uit</button>

Opmerking:Pop-ups moeten met JavaScript worden geïnitialiseerd om te werken.

De volgende code activeert alle pop-ups in het document:

Voorbeeld

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
}
</script>

Probeer het zelf

Positioneer de pop-upbalk

Standaard verschijnt de pop-upbalk aan de rechterkant van het element.

Gebruik data-bs-placement Stel de positie van de pop-upbalk in van links, rechts, boven of onder het element:

Voorbeeld

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Bovenkant</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Onderkant</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Links</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Rechts</a>

Probeer het zelf

Opmerking:Als er niet voldoende ruimte is, werkt de placement-eigenschap mogelijk niet zoals verwacht. Bijvoorbeeld: als je de top-plaatsingseigenschap gebruikt aan de bovenkant van de pagina (geen voorbehouden ruimte), wordt de pop-up weergegeven onder of aan de rechterkant van het element (op elke plek waar er ruimte is).

Sluit pop-up

Standaard gesloten bij herhaaldelijk klikken op het element. Maar je kunt data-bs-trigger="focus" Eigenschap, stel deze eigenschap in om het pop-upvenster te sluiten bij een klik buiten het element:

Voorbeeld

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Klik op elke locatie in het document om dit pop-upvenster te sluiten">Klik op mij</a>

Probeer het zelf

Hover pop-up

Tip:Als je een pop-up wilt weergeven wanneer je de muispointer over het element beweegt, gebruik dan de waarde "hover" van data-bs-trigger Eigenschap:

Voorbeeld

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Pop-up tekst">Hover hierboven</a>

Probeer het zelf