overlay

Tooltip

Radix UI ベースのホバーツールチップ。TooltipProvider でアプリを一度ラップするだけで使用可能。

インポート

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

TooltipProviderTooltipTooltipTriggerTooltipContent

Props

Prop	型	デフォルト	説明
side (TooltipContent)	'top' \| 'right' \| 'bottom' \| 'left'	'top'	Preferred tooltip side
sideOffset (TooltipContent)	number	6	Distance from trigger in pixels

Preview

使用例

Basic

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

← Toast

コンポーネント一覧