TkxPopover

import { TkxPopover, TkxButton } from 'tekivex-ui';

Basic

Basic — click trigger to open

More info

<TkxPopover
  trigger={<TkxButton variant="outline">More info</TkxButton>}
  content={<div>About this metric…</div>}
/>

Placements

Placement options

top

bottom

left

right

<TkxPopover trigger={...} placement="top"    content={...} />
<TkxPopover trigger={...} placement="bottom" content={...} />
<TkxPopover trigger={...} placement="left"   content={...} />
<TkxPopover trigger={...} placement="right"  content={...} />

Props

Prop	Type	Required	Description
trigger	ReactNode	yes
content	ReactNode	yes
placement	PopoverPlacement
isOpen	boolean
onOpenChange	(open: boolean) => void
closeOnClickOutside	boolean
className	string
style	CSSProperties

Accessibility

• Keyboard navigation supported on all interactive elements
• :focus-visible outline at 2px (theme-token primary)
• ARIA roles and properties applied per WAI-ARIA 1.2
• Respects prefers-reduced-motion
• Minimum 44×44 touch target where applicable

Source

The implementation lives at src/components/TkxPopover.tsx.

For the full interactive sandbox with every prop tweakable, open the playground.