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. If the popover should overflow the viewport, it will be automatically resized to fit within the viewport, and the content will be scrollable.
<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 |