Popover

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/popover

UsageCopy Anchor Link

<Popover>
  <PopoverTrigger render={<Button />}>Notifications</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>All caught up</PopoverTitle>
    <PopoverDescription>New mentions will show up here.</PopoverDescription>
  </PopoverContent>
</Popover>

ArrowCopy Anchor Link

Pass arrow to point at the trigger. Use it when several triggers sit close together, like info icons in a table or toolbar, so it is clear which one the popover belongs to.

SizesCopy Anchor Link

size on PopoverContent: sm (14rem), md (18rem, default), lg (24rem) or auto to fit the content. On small screens it never gets wider than the viewport.

FormCopy Anchor Link

For a quick edit that does not deserve a dialog. PopoverForm validates like Input, focus starts on the first field, and Cmd/Ctrl+Enter submits from any field, a textarea included.

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger render={<Button />}>Add note</PopoverTrigger>
  <PopoverContent>
    <PopoverForm onFormSubmit={(values) => { save(values.note); setOpen(false); }}>
      <Field name="note">
        <FieldLabel>Note</FieldLabel>
        <Textarea required />
        <FieldError />
      </Field>
      <PopoverFooter>
        <PopoverClose render={<Button variant="ghost" size="sm" />}>Cancel</PopoverClose>
        <Button type="submit" variant="primary" size="sm" shortcut="mod+enter">Save</Button>
      </PopoverFooter>
    </PopoverForm>
  </PopoverContent>
</Popover>

ScrollingCopy Anchor Link

The popover follows its trigger while the page scrolls. When the trigger leaves the view, the popover hides with it instead of floating over unrelated content, and comes back with anything you typed once the trigger is visible again.

AccessibilityCopy Anchor Link

The trigger says whether the popover is open. Focus moves into the popover when it opens and back to the trigger when it closes.

Popover or something else?Copy Anchor Link

• Content shown on hover that only previews a link: Hover card.
• A short label for an icon button: Tooltip.
• A list of actions: Dropdown menu.
• Longer forms, or anything that needs your full attention: Dialog.

API referenceCopy Anchor Link