Caroa UI

Tooltip

ホバー時に表示されるツールチップコンポーネント。

インポート

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@caroainc/ui-components/client'

基本的な使い方

Loading...
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>ホバーしてね</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>ツールチップの内容</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

表示位置

Loading...
<TooltipContent side="top">上</TooltipContent>
<TooltipContent side="right">右</TooltipContent>
<TooltipContent side="bottom">下</TooltipContent>
<TooltipContent side="left">左</TooltipContent>

Props

TooltipContent

PropTypeDefaultDescription
side'top' | 'right' | 'bottom' | 'left''top'表示位置
sideOffsetnumber4トリガーからの距離

On this page