Popover

Floating content panel anchored to a trigger element.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Popover, PopoverTrigger, PopoverContent } from '@kittl/ui-react';

Usage

Web Component

<kittl-popover placement="bottom">
  <kittl-popover-trigger>
    <kittl-button>Show Popover</kittl-button>
  </kittl-popover-trigger>
  <kittl-popover-content>
    <p>Popover content here.</p>
  </kittl-popover-content>
</kittl-popover>

React

<Popover
  placement="bottom"
  onPopoverOpen={() => console.log('opened')}
  onPopoverClose={() => console.log('closed')}
>
  <PopoverTrigger>
    <Button>Show Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content here.</p>
  </PopoverContent>
</Popover>

Props

Property	Type	Default	Description
placement	Placement	'bottom'	Floating-ui placement
open	boolean	false	Whether the popover is open
offset	number	8	Offset from trigger in pixels

Events

Event	Detail	Description
popover-open	—	Popover opened
popover-close	—	Popover closed

React props: onPopoverOpen, onPopoverClose

Accessibility

• Content has role="dialog" and aria-hidden when closed
• Content is inert when closed (prevents focus trapping)
• Keyboard: Escape closes the popover and returns focus to the trigger
• Click outside closes the popover