---
id: Popover
section: components
cssPrefix: pf-c-popover
propComponents: ['Popover']
---

import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';

## Examples

### Basic

```ts file="./PopoverBasic.tsx"
```

### Close popover from content (controlled)

```ts file="./PopoverCloseControlled.tsx"
```

### Close popover from content (uncontrolled)

Note: If you use the isVisible prop, either refer to the example above or if you want to use the hide callback from the content then be sure to keep isVisible in-sync.

```ts file="./PopoverCloseUncontrolled.tsx"
```

### Without header/footer/close and no padding

```ts file="./PopoverWithoutHeaderFooterCloseNoPadding.tsx"
```

### Width auto

```ts file="./PopoverWidthAuto.tsx"
```

### Popover react ref

```ts file="./PopoverReactRef.tsx"
```

### Popover selector ref

```ts file="./PopoverSelectorRef.tsx"
```

### Advanced

```ts file="./PopoverAdvanced.tsx"
```

### Popover with icon in the title

```ts file="./PopoverWithIconInTheTitle.tsx" 
```

### Alert popover

```ts file="./PopoverAlert.tsx" 
```