Overlays

Tooltip

A popup that displays information related to an element on hover or focus.

Import

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipPopup,
  TooltipTitle,
  TooltipDescription,
} from "@countryclub/ui-react";

Default

With arrow

Add an arrow pointing to the trigger with the `arrow` prop on `TooltipPopup`.

With supporting text

Use `TooltipTitle` and `TooltipDescription` to provide additional context inside the tooltip.

Placements

Control the tooltip position with the `side` prop: `top`, `right`, `bottom`, or `left`.