# React Bootstrap Popovers

A React Bootstrap popover with a title and body: opens on click next to its element, closes on Escape or a click outside, positioned by Floating UI.

> This component is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

A popover holds more than a tooltip: a small overlay with an optional title and a body, opened with a click. Use it for a short explanation next to a setting, or for details the user asks to see.

`Popover` is a React component that wraps the element that opens it. Floating UI places the overlay and Bootstrap's CSS styles it, so there is no Bootstrap JavaScript, Popper or react-bootstrap involved. Popovers are part of the PRO version of [AdminKit for React](/react/).

A click on the element opens the popover to its right. It closes on a second click, on Escape and on a click outside both the element and the popover. The popover renders in a portal on `document.body`.

## Example

```html
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-title="Delete project" data-bs-content="Archived projects can be deleted from Settings.">Click to toggle popover</button>
```
```tsx code
import { Popover } from "@/components/bootstrap/overlay";

export function DeleteHint() {
  return (
    <Popover title="Delete project" content="Archived projects can be deleted from Settings.">
      <button type="button" className="btn btn-danger">Click to toggle popover</button>
    </Popover>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | | The `.popover-header`, an `h3`; no header without it |
| `content` | `ReactNode` | | The `.popover-body` |
| `placement` | `"top" \| "bottom" \| "left" \| "right"` | `"right"` | The side of the element it appears on |
| `trigger` | `("hover" \| "focus" \| "click")[]` | `["click"]` | The events that open it |
| `children` | `ReactElement` | | One element that opens the popover |

`Popover` clones its child to add a `ref`, the trigger handlers and `aria-describedby`. So the child is one element: an HTML element, or a component that passes `ref` and the other props on to one. The child's own handlers still run. With the `click` trigger, the popover prevents the click's default action, so a link as the child does not navigate.

The component is in `src/components/bootstrap/overlay.tsx`, together with `Tooltip`.

## Four directions

Put the popover where it covers the least: `placement` picks the side. Without room there, the popover flips to the opposite side. It stays 8px from the edges of the window.

```html
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Popover on top" data-bs-content="Shown above the button.">Popover on top</button>
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-title="Popover on bottom" data-bs-content="Shown below the button.">Popover on bottom</button>
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="popover" data-bs-placement="left" data-bs-title="Popover on left" data-bs-content="Shown to the left of the button.">Popover on left</button>
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="popover" data-bs-placement="right" data-bs-title="Popover on right" data-bs-content="Shown to the right of the button.">Popover on right</button>
```
```tsx code
<Popover title="Popover on top" content="Shown above the button." placement="top">
  <button type="button" className="btn btn-secondary me-2 mb-2">Popover on top</button>
</Popover>
<Popover title="Popover on bottom" content="Shown below the button." placement="bottom">
  <button type="button" className="btn btn-secondary me-2 mb-2">Popover on bottom</button>
</Popover>
<Popover title="Popover on left" content="Shown to the left of the button." placement="left">
  <button type="button" className="btn btn-secondary me-2 mb-2">Popover on left</button>
</Popover>
<Popover title="Popover on right" content="Shown to the right of the button." placement="right">
  <button type="button" className="btn btn-secondary me-2 mb-2">Popover on right</button>
</Popover>
```

## Hover and focus

Sometimes a popover should open without a click, as a tooltip does. `trigger={["hover", "focus"]}` opens it while the pointer is over the element or while the element has the focus. Use it to explain a disabled button. The button gets no events, so the popover goes on a focusable `span` around it.

```html
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Read only" data-bs-content="Ask an owner for edit access.">
  <button type="button" class="btn btn-primary" disabled>Edit</button>
</span>
```
```tsx code
<Popover
  title="Read only"
  content="Ask an owner for edit access."
  trigger={["hover", "focus"]}
>
  <span className="d-inline-block" tabIndex={0}>
    <button type="button" className="btn btn-primary" disabled>Edit</button>
  </span>
</Popover>
```

## Accessibility

- The popover has `role="tooltip"`. While it is open, the element has `aria-describedby` with the popover's `id`, so screen readers read the popover's text with the element.
- The focus stays on the element when the popover opens, and the popover sits at the end of `document.body`, far from the element in the Tab order. Keep the content to text. For links, buttons or form fields, use a [dropdown](/react/docs/components/dropdowns/) or a [modal](/react/docs/components/modal/).
- Escape closes the popover. Open it from a button, or an element with `tabIndex={0}`, so keyboard users can reach it.

## Related

- [Next.js Bootstrap popovers](/nextjs/docs/components/popovers/): the same component in AdminKit for Next.js
- [Bootstrap 5 popovers](/bootstrap/docs/components/popovers/): the popovers of the HTML version
- [Tooltips](/react/docs/components/tooltips/): a short text on hover and focus
- [General UI demo](https://react-demo.adminkit.io/ui-general)

---

Canonical HTML page: https://adminkit.io/react/docs/components/popovers/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io