Popover
A popover is a floating container that is rendered over the content next to an anchor — commonly a button — which initiates its display.
Showcase
Usage
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;
</script>
<button class="primary"
bind:this={button}
on:click={() => (visible = !visible)}
>
Open Popover
</button>
<Popover bind:visible anchor={button}>
This is a popover!
</Popover>Properties
| 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 |