Popovers

A component that appears below a target when hovered or clicked.

The target slot defines what element will cause the popover to appear when clicked or hovered.

<Popover>
	<Button slot="target">Popover</Button>

	<div class="grid grid-cols-1 grid-rows-4 md:grid-cols-2 md:grid-rows-2 w-96 gap-2">
		<Button alignment="left">
			<div class="flex flex-col gap-2">
				<span>Button 1</span>
				<span class="text-xs opacity-80">A description</span>
			</div>
		</Button>
		<Button alignment="left">
			<div class="flex flex-col gap-2">
				<span>Button 2</span>
				<span class="text-xs opacity-80">Another description</span>
			</div>
		</Button>
		<Button alignment="left">
			<div class="flex flex-col gap-2">
				<span>Button 3</span>
				<span class="text-xs opacity-80">Yet another description</span>
			</div>
		</Button>
		<Button alignment="left">
			<div class="flex flex-col gap-2">
				<span>Ok 4</span>
				<span class="text-xs opacity-80">Ok 4</span>
			</div>
		</Button>
	</div>
</Popover>

Show on hover

<Popover openOnHover>
	<Button slot="target">Hover over me</Button>
	thanks for hovering
</Popover>

Custom Origins

<Popover origin="top-left">
	<Button slot="target">Click me</Button>
	Top left origin
</Popover>

Menus

<Menu>
	<Button slot="target">Menu</Button>
	<MenuDivider>Test Menu</MenuDivider>
	<MenuButton on:click={() => alert('clicked')}>Example button</MenuButton>
</Menu>

Tooltips

You can also make tooltips with popovers.

<Popover openOnHover>
	<Icon src={InformationCircle} size="24" slot="target" />
	this is a tooltip
</Popover>