This component does not work without JS.
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
Hover over me
<Popover openOnHover>
<Button slot="target">Hover over me</Button>
thanks for hovering
</Popover>
Custom Origins
Click me
<Popover origin="top-left">
<Button slot="target">Click me</Button>
Top left origin
</Popover>
Menus
Menu
<Menu>
<Button slot="target">Menu</Button>
<MenuDivider>Test Menu</MenuDivider>
<MenuButton on:click={() => alert('clicked')}>Example button</MenuButton>
</Menu>
Menu
Tooltips
You can also make tooltips with popovers.
<Popover openOnHover>
<Icon src={InformationCircle} size="24" slot="target" />
this is a tooltip
</Popover>