║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Popover description: An accessible popup anchored to a button.

links: doc: https://base-ui.com/react/components/popover#api-reference

<ComponentPreview name="popover-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/popover

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="popover" title="components/ui/popover.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import {
  Popover,
  PopoverClose,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverPopup>
    <PopoverTitle>Popover Title</PopoverTitle>
    <PopoverDescription>Popover Description</PopoverDescription>
    <PopoverClose>Close</PopoverClose>
  </PopoverPopup>
</Popover>

Examples

With Close Button

<ComponentPreview name="popover-with-close" />

Tooltip Style

Use the tooltipStyle prop to make a popover look like a tooltip. This is recommended when you have an info icon button whose only purpose is to show additional information. See the tooltip accessibility guidelines for best practices.

<ComponentPreview name="input-group-with-end-tooltip" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.

Quick Checklist

• Replace asChild → render on PopoverTrigger and closing buttons
• Prefer PopoverPopup; PopoverContent remains for legacy
• If you used asChild on any other parts, switch to the render prop

Additional Notes

Base UI introduces PopoverTitle and PopoverDescription to structure headings and helper text inside the popup. Base UI also introduces a PopoverClose component for adding close buttons to the popup.

Comparison Example

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:asChild] <Popover> <PopoverTrigger asChild> <Button variant="outline">Open Popover</Button> </PopoverTrigger> <PopoverContent> <h2>Popover Title</h2> <p>Popover Description</p> </PopoverContent> </Popover> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:PopoverTitle] // [!code word:PopoverDescription] // [!code word:PopoverClose] // [!code word:render:2] <Popover> <PopoverTrigger render={<Button variant="outline" />}> Open Popover </PopoverTrigger> <PopoverPopup> <PopoverTitle>Popover Title</PopoverTitle> <PopoverDescription>Popover Description</PopoverDescription> <PopoverClose render={<Button variant="ghost" />}>Close</PopoverClose> </PopoverPopup> </Popover> ``` </span>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║