# Popover: Open on hover

> Set `openOnHover` on the trigger for preview cards. `delay` and `closeDelay` keep it from flickering as the pointer passes over.

Example: https://hextaui.com/docs/popover/examples/hover
Component docs: https://hextaui.com/docs/popover.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/popover-hover.json
```

This adds `components/examples/popover/hover.tsx` with the Popover component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/popover/hover.tsx"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export function PopoverHover() {
  return (
    <Popover>
      <PopoverTrigger
        openOnHover
        delay={200}
        closeDelay={150}
        render={<Button variant="link" />}
      >
        @preetsuthar
      </PopoverTrigger>
      <PopoverContent align="start">
        <div className="flex items-start gap-3">
          <Avatar>
            <AvatarFallback>PS</AvatarFallback>
          </Avatar>
          <PopoverHeader>
            <PopoverTitle>Preet Suthar</PopoverTitle>
            <PopoverDescription>
              Building HextaUI. Opens on hover after 200ms and stays open while
              the pointer is inside.
            </PopoverDescription>
          </PopoverHeader>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

## Props in this example

### PopoverTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `openOnHover` | `boolean` | `false` |  |
| `delay` | `number` | `300` | Milliseconds before opening on hover. |
| `closeDelay` | `number` | `0` | Milliseconds before closing after hover ends. |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### PopoverContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `"center"` |  |

## More Popover examples

- [Content that changes size](https://hextaui.com/docs/popover/examples/resizing.md)
- [Controlled](https://hextaui.com/docs/popover/examples/controlled.md)
- [Placement](https://hextaui.com/docs/popover/examples/placement.md)
- [Detached triggers](https://hextaui.com/docs/popover/examples/detached.md)
- [With a calendar](https://hextaui.com/docs/popover/examples/calendar.md)
- [Nested](https://hextaui.com/docs/popover/examples/nested.md)
- [Long content](https://hextaui.com/docs/popover/examples/long-content.md)
- [Modal](https://hextaui.com/docs/popover/examples/modal.md)
- [Disabled](https://hextaui.com/docs/popover/examples/disabled.md)
- [Right to left](https://hextaui.com/docs/popover/examples/rtl.md)