SaaS Tooltip

Hover tooltip with simple and compound variants

SaaSOverlay

Overview

Tooltip provides contextual information on hover or focus. Built on Radix UI Tooltip primitive with portal-based rendering and animated entry/exit. Also includes a SimpleTooltip convenience wrapper that bundles Provider, Root, Trigger, and Content.

Usage

import {
  SimpleTooltip,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@leanicon/web-builder-library/saas";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button>Hover me</button>
    </TooltipTrigger>
    <TooltipContent>Helpful text</TooltipContent>
  </Tooltip>
</TooltipProvider>;

{
  /* Or use the SimpleTooltip shorthand */
}
<SimpleTooltip content="Helpful text">
  <button>Hover me</button>
</SimpleTooltip>;

Variants

Default

Dark

Top

Bottom

With Icon Trigger

SimpleTooltip

Props

Name	Type	Default	Required
`asChild`	`boolean`	—	No
`content`	`ReactNode`	—	Yes
`side`	`enum`	`top`	No
`sideOffset`	`number`	`4`	No
`delayDuration`	`number`	`200`	No
`className`	`string`	—	No