Tooltip

Tooltip defines how EnterUI handles compact help text for dense product ui, including default structure, accessible states, and token-driven styling.

#Default usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild><Button variant="secondary">Hover or focus</Button></TooltipTrigger>
    <TooltipContent>Compact help for dense UI.</TooltipContent>
  </Tooltip>
</TooltipProvider>

#Import

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

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