Popover

Name: Popover
Author: reaviz

ASecurity

Content popover anchored to an element. Built on Tooltip with focus trapping and click trigger. Supports all Tooltip positioning options.

4 stars
0 votes
0 copies
2 views
Added May 27, 2026

data-aitypescriptreactnode

Works with

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill popover --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Popover?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-popover/badge)](https://www.skillsdirectory.com/skills/reaviz-popover)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Popover

Content popover anchored to an element. Built on Tooltip with focus trapping and click trigger. Supports all Tooltip positioning options.

## Import

```tsx
import { Popover } from 'reablocks';
```

## Popover Props

Extends Tooltip props (except `theme`), plus:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `disablePadding` | `boolean` | — | Remove default padding |
| `popoverStyle` | `CSSProperties` | — | Inline styles for popover content |
| `popoverClassName` | `string` | — | CSS classes for popover content |
| `autoFocus` | `FocusTargetOrFalse` | — | Initial focus target (or `false` for none) |
| `theme` | `PopoverTheme` | — | Per-instance theme override |

Key inherited props from Tooltip:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `ReactNode \| (() => ReactNode)` | — | Popover content |
| `placement` | `Placement` | `'top'` | Floating UI placement |
| `trigger` | `TriggerTypes` | `'click'` | How to open (click by default) |
| `closeOnEscape` | `boolean` | `true` | Close on Escape key |
| `closeOnBodyClick` | `boolean` | `true` | Close on outside click |
| `leaveDelay` | `number` | `200` | Delay before closing (ms) |
| `className` | `string` | — | Tooltip wrapper CSS classes |

## Basic Usage

```tsx
<Popover content="Popover content here">
  <Button>Click me</Button>
</Popover>
```

## Rich Content

```tsx
<Popover content={() => (
  <Card>
    <h3>Popover Title</h3>
    <p>Some detailed content...</p>
    <Button size="small">Action</Button>
  </Card>
)}>
  <Button>Open Popover</Button>
</Popover>
```

## PopoverTheme Interface

```typescript
interface PopoverTheme {
  base: string;           // Base styles (whitespace, text-center, padding, rounded, bg)
  disablePadding: string; // No padding override
}
```