Tooltip

Hover/focus tooltip. Use the shorthand <Tooltip content="…"> or the granular Provider/Root/Trigger/Content anatomy.

Usage (shorthand)

import { Tooltip, IconButton } from '@bwo-ui/react';

<Tooltip content="Copy to clipboard" side="top">
  <IconButton aria-label="Copy"><CopyIcon /></IconButton>
</Tooltip>

Anatomy

import {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
} from '@bwo-ui/react';

<TooltipProvider delayDuration={150}>
  <TooltipRoot>
    <TooltipTrigger asChild><button>Hover me</button></TooltipTrigger>
    <TooltipContent side="bottom">Hello!</TooltipContent>
  </TooltipRoot>
</TooltipProvider>