# Popover **Category**: react **URL**: https://www.heroui.com/docs/react/components/popover **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(overlays)/popover.mdx > Displays rich content in a portal triggered by a button or any custom element *** ## Import ```tsx import { Popover } from '@heroui/react'; ``` ### Usage ```tsx import {Button, Popover} from "@heroui/react"; export function PopoverBasic() { return (
Popover Title

This is the popover content. You can put any content here.

); } ``` ### Anatomy Import the Popover component and access all parts using dot notation. ```tsx import { Popover } from '@heroui/react'; export default () => ( {/* content goes here */} ) ``` ### With Arrow ```tsx import {Ellipsis} from "@gravity-ui/icons"; import {Button, Popover} from "@heroui/react"; export function PopoverWithArrow() { return (
Popover with Arrow

The arrow shows which element triggered the popover.

Popover with Arrow

The arrow shows which element triggered the popover.

); } ``` ### Placement ```tsx import {Button, Popover} from "@heroui/react"; export function PopoverPlacement() { return (

Top placement

Left placement
Click buttons

Right placement

Bottom placement
); } ``` ### Interactive Content ```tsx "use client"; import {Avatar, Button, Popover} from "@heroui/react"; import {useState} from "react"; export function PopoverInteractive() { const [isFollowing, setIsFollowing] = useState(false); return (
SJ

Sarah Johnson

@sarahj
SJ

Sarah Johnson

@sarahj

Product designer and creative director. Building beautiful experiences that matter.

892 Following
12.5K Followers
); } ``` ## Related Components - **Button**: Allows a user to perform an action - **Tooltip**: Contextual information on hover or focus - **Select**: Dropdown select control ### Custom Render Function ```tsx "use client"; import {Button, Popover} from "@heroui/react"; export function CustomRenderFunction() { return (
} > Popover Title

This is the popover content. You can put any content here.

); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import { Popover, Button } from '@heroui/react'; function CustomPopover() { return (

Custom Styled

This popover has custom styling

 ); } ``` ### Customizing the component classes To customize the Popover component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @layer components { .popover { @apply rounded-xl shadow-2xl; } .popover__dialog { @apply p-4; } .popover__heading { @apply text-lg font-bold; } } ``` HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize. ### CSS Classes The Popover component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/popover.css)): #### Base Classes - `.popover` - Base popover container styles - `.popover__dialog` - Dialog content wrapper - `.popover__heading` - Heading text styles - `.popover__trigger` - Trigger element styles ### Interactive States The component supports animation states: - **Entering**: `[data-entering]` - Applied during popover appearance - **Exiting**: `[data-exiting]` - Applied during popover disappearance - **Placement**: `[data-placement="*"]` - Applied based on popover position - **Focus**: `:focus-visible` or `[data-focus-visible="true"]` ## API Reference ### Popover Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Trigger and content elements | | `isOpen` | `boolean` | - | Controls popover visibility (controlled) | | `defaultOpen` | `boolean` | `false` | Initial open state (uncontrolled) | | `onOpenChange` | `(isOpen: boolean) => void` | - | Called when open state changes | ### Popover.Content Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Content to display in the popover | | `placement` | `"top" \| "bottom" \| "left" \| "right"` (and variants) | `"bottom"` | Placement of the popover | | `offset` | `number` | `8` | Distance from the trigger element | | `shouldFlip` | `boolean` | `true` | Whether popover can change orientation to fit | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Popover.Dialog Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Dialog content | | `className` | `string` | - | Additional CSS classes | ### Popover.Trigger Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Element that triggers the popover | | `className` | `string` | - | Additional CSS classes | ### Popover.Arrow Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Custom arrow element | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.|