Popover
Rich floating content anchored to a trigger.
<script lang="ts">
import {
Popover,
PopoverTrigger,
PopoverContent
} from "$lib/components/ui/popover";
import { Button } from "$lib/components/ui/button";
import { Label } from "$lib/components/ui/label";
import { Input } from "$lib/components/ui/input";
</script>
<Popover>
<PopoverTrigger>
{#snippet child({ props })}
<Button variant="ghost" {...props}>Open popover</Button>
{/snippet}
</PopoverTrigger>
<PopoverContent>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-1">
<p class="text-sm font-medium tracking-[-0.39px]">Dimensions</p>
<p class="text-xs tracking-[-0.3px] text-(--text)/56">
Set the layout dimensions.
</p>
</div>
<div class="flex flex-col gap-2">
<Label for="width">Width</Label>
<Input id="width" value="100%" />
</div>
</div>
</PopoverContent>
</Popover>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the popover source from the registry into $lib/components/ui/popover.
Usage
<script lang="ts">
import { Popover, PopoverTrigger, PopoverContent } from '$lib/components/ui/popover';
import { Button } from '$lib/components/ui/button';
</script>
<Popover>
<PopoverTrigger>
{#snippet child({ props })}
<Button variant="ghost" {...props}>Open</Button>
{/snippet}
</PopoverTrigger>
<PopoverContent>Place content here.</PopoverContent>
</Popover>