A popover is a floating container that is rendered over the content next to an anchor — commonly a button — which initiates its display.



The popover placement will be below the anchor element, either from left to right (default) or from right to left.

<script lang="ts">let visible = false;
let button;
<button class="primary"
    on:click={() => (visible = !visible)}
    Open Popover
<Popover bind:visible anchor={button}>
    This is a popover!


Property Description Type Default
visible Display or hide the popover. boolean false
direction Layout direction, either left-to-right ltr or right-to-left rtl. string ltr
anchor The anchor element on which the popover depends on. HTMLElement or undefined undefined
closeButton Option to add a close button on top right corner. true or undefined undefined
invisibleBackdrop Don’t darken and blur the background while the popup is open. true or undefined undefined