Tooltip

A tooltip is a label that appears beside an element while it is hovered or focused. React Bootstrap 126 splits the job: <Tooltip> is the bubble, <OverlayTrigger> decides when to show it and where.

import { OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
const places = ['top', 'right', 'bottom', 'left'];
export default function Toolbar() {
  return places.map((placement) => (
    <OverlayTrigger key={placement} placement={placement} delay={{ show: 250, hide: 100 }}
      overlay={<Tooltip id={`tip-${placement}`}>On <strong>{placement}</strong></Tooltip>}>
      <Button variant="secondary" className="me-2">Tooltip on {placement}</Button>
    </OverlayTrigger>
  ));
}

OverlayTrigger takes exactly one child and clones it to attach onMouseEnter, onMouseLeave, onFocus, onBlur and a ref, so a custom child must forward its props and ref to a real DOM node. The bubble renders through a portal (Portals) into document.body, which is how it escapes an overflow: hidden ancestor. Popper (@popperjs/core, via @restart/ui) positions it at open time and flips the placement when the preferred side has no room. Set trigger to 'click', 'focus' or ['hover', 'focus'], and show with onToggle to drive it from state.

One thing it does not do is announce itself: version 2.10.10 puts no aria-describedby on the trigger, so a screen reader user gets the button's label and nothing else. Add aria-describedby="tip-top" to the <Button> yourself, matching the id you gave <Tooltip>, whenever the bubble carries information the label does not.