React Bootstrap Tooltips

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.

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.

ExampleCopy Anchor Link

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.

PropsCopy Anchor Link

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 contentCopy Anchor Link

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

<Tooltip
  content={
    <>
      <em>Tooltip</em> <u>with</u> <b>HTML</b>
    </>
  }
>
  <button type="button" className="btn btn-secondary">Tooltip with HTML</button>
</Tooltip>

Icon buttonsCopy Anchor Link

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:

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 elementsCopy Anchor Link

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:

<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>

AccessibilityCopy Anchor Link

• 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 for more content.

RelatedCopy Anchor Link

• Next.js Bootstrap tooltips: the same component in AdminKit for Next.js
• Bootstrap 5 tooltips: the tooltips of the HTML version
• Popovers: a larger overlay that opens on click
• General UI demo