Popover

Description

Displays a popover in relation to the target.

• Does not require the target to be position: relative;
• Adjusts position in case the popover renders outside of the viewport

props

• class
• display - shows / hides the popover
• id
• position - where the popover is displayed in relation to the target, ex: br is bottom, right aligned
• target - target element to position the popover in relation to
• transition - scales the popover, set to false to disable

slots

name	purpose	default value
default	default	Popover

example

<script lang="ts">
    import { Popover } from "drab";

    let target: HTMLButtonElement;

    let display = false;

    const open = () => (display = true);
    const close = () => (display = false);
</script>

<button
    class="button button-primary"
    type="button"
    bind:this={target}
    on:click={open}
>
    Open
</button>

<Popover {target} bind:display class="p-2">
    <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
        <div class="font-bold">Bottom</div>
        <button class="button button-secondary" on:click={close}>Close</button>
        <button class="button button-secondary" on:click={close}>Close</button>
        <button class="button button-secondary" on:click={close}>Close</button>
    </div>
</Popover>