Popover

Floating content panel anchored to a trigger element.

Import

import '@kittl/ui';

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

Usage

<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>

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

/** Basic Popover usage, rendered live on the docs site. */
export const PopoverUsage = () => (
  <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	Attribute	Type	Default	Description
placement	placement	Placement	'bottom'	Floating-ui placement
open	open	boolean	false	Whether the popover is open
offset	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