Popover

Display content over the window without taking away focus from the current context.

<script lang="ts">
	import { Popover, PopoverContent, PopoverTrigger } from 'lithesome';
	import { Button, cn } from '$site/index.js';
	import { scale } from 'svelte/transition';
	import { HelpCircleIcon, BookTemplateIcon, KeyRoundIcon } from 'lucide-svelte';

	let visible = $state(false);

	const items = [
		{
			name: 'Information',
			children: [
				{ title: 'Help Centre', text: 'Check out our FAQs or ask a real human!', icon: HelpCircleIcon },
				{ title: 'Templates', text: 'Setup your app in an instant!', icon: BookTemplateIcon }
			]
		},
		{
			name: 'Tools',
			children: [
				{ title: 'Token Generator', text: 'Whip up a quick token to use in your next app.', icon: KeyRoundIcon }
			]
		}
	];
</script>

<Popover bind:visible>
	<PopoverTrigger>
		<Button variant="primary">Resources</Button>
	</PopoverTrigger>

	<PopoverContent
		class={cn(
			'w-[450px] origin-top translate-y-1 rounded-xl border p-4 shadow-xl backdrop-blur ',
			'border-neutral-300 bg-white shadow-neutral-200',
			'dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-[#111]'
		)}
		transition={[scale, { start: 0.9, duration: 150 }]}
	>
		{#each items as { name, children }}
			<div class="mb-4 border-b border-neutral-200 pb-4 last:mb-0 last:border-b-0 last:pb-0 dark:border-white/10">
				<h4 class="mb-2 text-xs font-semibold uppercase text-neutral-500">{name}</h4>
				{#each children as { icon: Icon, text, title }}
					<button
						type="button"
						class="focusOutline flex w-full items-center gap-4 rounded-md p-4 text-left hover:bg-black/[0.035] dark:hover:bg-white/5"
						onclick={() => (visible = false)}
					>
						<Icon class="h-8 w-8" />
						<div>
							<p class="font-semibold text-neutral-800 dark:text-white">{title}</p>
							<p class="text-sm text-neutral-500 dark:text-neutral-400">{text}</p>
						</div>
					</button>
				{/each}
			</div>
		{/each}
	</PopoverContent>
</Popover>

API Reference

Popover

Prop	Type	Description
`visible`	`boolean` `Default: false`	Controlled state of the popover content.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the popover content is visible or not.

Data attribute	Value	Description
`data-popover`	`''`	The base data attribute, can be used for styling.
`data-state`	`'opened' \| 'closed'`

PopoverTrigger

This component is a child of Popover

Child prop	Type	Description
`visible`	`boolean`	Whether or not the popover content is visible or not.

Data attribute	Value	Description
`data-popovertrigger`	`''`	The base data attribute, can be used for styling.

PopoverContent

This component is a child of Popover

Prop	Type	Description
`placement`	`Placement` `Default: bottom`	The FloatingUI placement string.
`constrainViewport`	`boolean` `Default: false`	Keeps the content dropdown from ever growing outside of the viewport.
`sameWidth`	`boolean` `Default: false`	Makes the content dropdown the same width as the trigger.
`portalTarget`	`strng \| HTMLElement` `Default: 'body'`	The target position for the content to be mounted.
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the popover content is visible or not.

Data attribute	Value	Description
`data-popovercontent`	`''`	The base data attribute, can be used for styling.

PopoverArrow

This component is a child of PopoverContent

Prop	Type	Description
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Data attribute	Value	Description
`data-popoverarrow`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`

Basic Example

<script>
	import { Popover, PopoverTrigger, PopoverContent, PopoverArrow } from 'lithesome';
</script>

<Popover>
	<PopoverTrigger>
		<button></button>
	</PopoverTrigger>
	<PopoverContent>
		<PopoverArrow />
	</PopoverContent>
</Popover>