# React Bootstrap Tooltips

A React Bootstrap tooltip that wraps any element: shown on hover and focus, placed by Floating UI on the top, bottom, left or right, styled by Bootstrap's CSS.

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

A tooltip is a short hint that appears when the user points at an element or tabs to it. Use it to explain an icon button, or to add a detail that does not fit in the label.

`Tooltip` is a React component that wraps one element. Floating UI places the tooltip, and Bootstrap's CSS styles it. So you need no Bootstrap JavaScript, Popper or react-bootstrap. Tooltips are part of the PRO version of [AdminKit for React](/react/).

There is nothing to initialize. Wrap the element, and the tooltip shows while the pointer is over it or while it has the focus. The tooltip renders in a portal on `document.body`, outside your layout, so a parent with `overflow: hidden` does not cut it off.

## Example

```html
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary mb-2" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
```
```tsx code
import { Tooltip } from "@/components/bootstrap/overlay";

export function TooltipButtons() {
  return (
    <>
      <Tooltip content="Tooltip on top" placement="top">
        <button type="button" className="btn btn-secondary me-2 mb-2">Tooltip on top</button>
      </Tooltip>
      <Tooltip content="Tooltip on right" placement="right">
        <button type="button" className="btn btn-secondary me-2 mb-2">Tooltip on right</button>
      </Tooltip>
      <Tooltip content="Tooltip on bottom" placement="bottom">
        <button type="button" className="btn btn-secondary me-2 mb-2">Tooltip on bottom</button>
      </Tooltip>
      <Tooltip content="Tooltip on left" placement="left">
        <button type="button" className="btn btn-secondary mb-2">Tooltip on left</button>
      </Tooltip>
    </>
  );
}
```

When there is no room on the chosen side, the tooltip flips to the other side, and it keeps 8px away from the edges of the window.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `ReactNode` | | The text of `.tooltip-inner` |
| `placement` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | The side of the element it appears on |
| `trigger` | `("hover" \| "focus" \| "click")[]` | `["hover", "focus"]` | The events that show it |
| `children` | `ReactElement` | | One element that shows the tooltip |

`Tooltip` clones its child to add a `ref`, the event handlers of the triggers and `aria-describedby`. So the child must be one element: an HTML element, or a component that passes `ref` and the other props on to one. The child's own handlers, such as its `onClick`, still run. The component is in `src/components/bootstrap/overlay.tsx`.

## HTML content

Sometimes a word in the tooltip needs emphasis. `content` takes any React node, so the tooltip can hold formatting:

```html
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
```
```tsx code
<Tooltip
  content={
    <>
      <em>Tooltip</em> <u>with</u> <b>HTML</b>
    </>
  }
>
  <button type="button" className="btn btn-secondary">Tooltip with HTML</button>
</Tooltip>
```

## Icon buttons

Icon buttons are where tooltips help most, because the icon alone may not say what the button does. But a tooltip is a description, not a name. An icon-only button needs an `aria-label` as well:

```tsx
import { Archive } from "lucide-react";

<Tooltip content="Archive the project">
  <button type="button" className="btn btn-light" aria-label="Archive">
    <Archive className="align-middle" />
  </button>
</Tooltip>
```

## Disabled elements

You may want to explain why a button is disabled. A disabled button gets no mouse or focus events, though, so its tooltip never shows. Wrap the button in a `span` that can take the focus, and put the tooltip on the `span`:

```html
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="You need the admin role">
  <button type="button" class="btn btn-primary" disabled>Delete workspace</button>
</span>
```
```tsx code
<Tooltip content="You need the admin role">
  <span className="d-inline-block" tabIndex={0}>
    <button type="button" className="btn btn-primary" disabled>Delete workspace</button>
  </span>
</Tooltip>
```

## Accessibility

- The tooltip has `role="tooltip"`. While it is shown, the element gets `aria-describedby` with the tooltip's `id`, so screen readers read the tooltip after the element's name.
- It shows on focus as well as on hover, so keyboard users see it. Put it on an element that can take the focus: a button, a link, or an element with `tabIndex={0}`.
- Escape hides it.
- Keep the content to short text. The tooltip hides when the pointer leaves the element, so links or buttons in it cannot be reached. Use a [popover](/react/docs/components/popovers/) for more content.

## Related

- [Next.js Bootstrap tooltips](/nextjs/docs/components/tooltips/): the same component in AdminKit for Next.js
- [Bootstrap 5 tooltips](/bootstrap/docs/components/tooltips/): the tooltips of the HTML version
- [Popovers](/react/docs/components/popovers/): a larger overlay that opens on click
- [General UI demo](https://react-demo.adminkit.io/ui-general)

---

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

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