Popover

Floating panel that opens on click. Use PopoverAnchor to position content by an anchor element instead of the trigger.

Installation

npm install @nqlib/nqui

Import

import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from '@nqlib/nqui';

Basic Usage

Copy this into your app — same pattern as the first example below.

import { Popover, PopoverTrigger, PopoverContent } from '@nqlib/nqui';
import { Button } from '@nqlib/nqui';

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Open</Button>
      </PopoverTrigger>
      <PopoverContent>Content</PopoverContent>
    </Popover>
  );
}

Examples

Each example has a Preview and Code tab. The code is copy-paste ready for your app (import from '@nqlib/nqui', same usage as above).

Basic Popover

Floating panel. Use PopoverAnchor to position by anchor, not trigger.

example.tsx

import { Popover, PopoverTrigger, PopoverContent } from '@nqlib/nqui';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <Popover>      <PopoverTrigger asChild>        <Button>Open</Button>      </PopoverTrigger>      <PopoverContent>Content</PopoverContent>    </Popover>  );}

Props

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Uncontrolled default open
`onOpenChange`	`(open: boolean) => void`	-	Callback when open changes

PopoverTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props into child (e.g. Button)
All standard `button` props	-	-	Accepts HTML button attributes

PopoverContent

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"center"`	Content alignment
`sideOffset`	`number`	`4`	Offset from trigger
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Placement
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML div attributes

PopoverAnchor

Use instead of PopoverTrigger when you need to position content by an anchor element. Pass through standard div props.

Next Steps

Tooltip for hover-only content
Dialog for modal content