Tooltip

#Default usage

#Usage

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild><Button variant="secondary">Hover or focus</Button></TooltipTrigger>
        <TooltipContent>Compact help for dense UI.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

#Accessibility

Tooltip content appears on hover and focus through Radix behavior. Keep tooltip text short and provide visible labels for essential controls.

#API

• TooltipProvider controls shared delay behavior.
• TooltipContent supports side, alignment, offset, and className.
• TooltipTrigger supports asChild.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.