Skip to main content
BlueAI
BlueAIBlueAI Design System
JAEN
Home/Components/Overlays/Tooltip

Tooltip

ホバー時にヒントテキストを表示するコンポーネント。

|
import { Tooltip } from "@blueai/ui"

Examples

Positions
上方向ツールチップ
下方向ツールチップ
左方向ツールチップ
右方向ツールチップ
<Tooltip content="上方向ツールチップ" position="top">
  <FormButton variant="secondary" size="sm">Top</FormButton>
</Tooltip>
<Tooltip content="下方向ツールチップ" position="bottom">
  <FormButton variant="secondary" size="sm">Bottom</FormButton>
</Tooltip>
<Tooltip content="左方向ツールチップ" position="left">
  <FormButton variant="secondary" size="sm">Left</FormButton>
</Tooltip>
<Tooltip content="右方向ツールチップ" position="right">
  <FormButton variant="secondary" size="sm">Right</FormButton>
</Tooltip>

Props

PropTypeDefaultDescription
content*string—ツールチップのテキスト
position"top" | "bottom" | "left" | "right""top"表示位置
children*ReactNode—トリガー要素