Leaf UI
  • English

      • Tooltip

      Add a brief explanation to a page element.

      Basic usage

      Live previewBasic usage
      basic.tsx
      import { Button, Tooltip } from '@sudden3/leaf-ui';
import { Info } from 'lucide-react';
export function TooltipBasic() {
  return (
    <div className="leaf-demo-row">
      {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
        <Tooltip
          key={placement}
          placement={placement}
          content="Save changes to the current project"
        >
          <Button variant="outline">{placement}</Button>
        </Tooltip>
      ))}
      <Tooltip content="This setting applies to all projects">
        <Button variant="ghost" startIcon={<Info />} aria-label="Settings information" />
      </Tooltip>
    </div>
  );
}

      Tooltip API

      PropTypeDefaultDescription
      contentReactNodeRequiredTooltip content
      childrenReactElementRequiredTrigger element supporting a ref and events
      placement'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end''top'Preferred placement; adjusts when space is limited
      open / defaultOpenbooleanfalseControlled / initial open state
      onOpenChange(open: boolean) => void—Open state change
      disabledbooleanfalseDisable the tooltip
      enterDelay / leaveDelaynumber100Pointer enter / leave delays in milliseconds
      classNamestring—Tooltip panel class

      Types

      Import the component props and item types when preparing your own values.

      import type { TooltipProps } from '@sudden3/leaf-ui';

      Usage notes

      Hover and keyboard focus both open the tooltip; Escape closes it. Existing events, refs and aria-describedby are preserved. Disabled buttons cannot receive focus; use a focusable span wrapper when needed. Use tooltips for explanatory text and a Dropdown or dialog for interactive actions.