ツールチップ付きボタンTooltipButton
Experimental

ボタン操作にツールチップ説明を組み合わせ、アイコンだけの操作や補足が必要な操作の意味を明確にします。

状態とバリエーション

実行結果が分かりにくいボタンには、ツールチップで何が起こるかを説明します。

アイコンだけの操作では、支援技術向けラベルとツールチップの文言を揃えます。スマホで確認できるように tooltipOpenOnClick を使います。

取り消しにくい操作は破壊的な見た目と説明文で意図を明確にします。

表は横にスクロールできます

プロパティ	型	初期値	説明
tooltip	React.ReactNode	-	ボタン操作の意味や結果を説明するツールチップ内容です。
tooltipSide	"top" \| "right" \| "bottom" \| "left"	"top"	ツールチップを表示したい方向です。
tooltipAlign	"start" \| "center" \| "end"	"center"	ボタンに対するツールチップの揃え位置です。
tooltipSideOffset	number	4	ボタンとツールチップの間隔です。
tooltipContentClassName	string	-	ツールチップ内容に追加するクラス名です。
tooltipOpenOnClick	boolean	false	タップやクリックでもツールチップを短時間表示するか。スマホのアイコンのみボタンで使います。
tooltipClickDuration	number	1600	tooltipOpenOnClick 時にツールチップを表示しておく時間です。
variant / size / children	Button props	-	Button と同じ見た目・サイズ・内容を指定できます。