Caroa UI

Tooltip

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

インポート

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

個別サブパス（バンドルサイズを抑えたい場合）:

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

基本的な使い方

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トリガーからの距離

Textarea

複数行テキスト入力コンポーネント。

TypingIndicator

入力中を示すインジケーターコンポーネント。

On this page

インポート基本的な使い方表示位置PropsTooltipContent