overlay

Tooltip

Hover tooltip built on Radix UI. Wrap app with TooltipProvider once.

Import

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@stella-ds/react'

TooltipProviderTooltipTooltipTriggerTooltipContent

Props

Prop	Type	Default	Description
side (TooltipContent)	'top' \| 'right' \| 'bottom' \| 'left'	'top'	Preferred tooltip side
sideOffset (TooltipContent)	number	6	Distance from trigger in pixels

Preview

Examples

Basic

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent side="top">Helpful hint text</TooltipContent>
  </Tooltip>
</TooltipProvider>

← Toast

All Components