Tooltip

Use Tooltip for concise contextual hints.

Quick Preview

Preset Examples

Code

<TooltipContent variant="dark" size="sm">Compact dark</TooltipContent>
<TooltipContent variant="dark" size="md">Default dark</TooltipContent>
<TooltipContent variant="light" size="md">Light tooltip</TooltipContent>
<TooltipContent variant="brand" size="lg">Brand callout</TooltipContent>

Usage

Code

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@altech-ui/react"
 
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent variant="brand" size="md">Hint text</TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

TooltipProvider: Radix Tooltip Provider props
Tooltip: Radix Tooltip Root props
TooltipTrigger: Radix Tooltip Trigger props
TooltipContent.variant?: dark | light | brand
TooltipContent.size?: sm | md | lg
TooltipContent: Radix Tooltip Content props