ツールチップ付きボタンTooltipButtonExperimental

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

プレビュー

状態とバリエーション

説明付きアクション

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

アイコンのみ

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

破壊的操作

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

プロパティ

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

使い方

import { TooltipButton } from "@gunjo/ui";
import { IconCopy } from "@tabler/icons-react";

export function CopyCodeIconAction() {
  return (
    <TooltipButton
      type="button"
      variant="ghost"
      size="icon"
      aria-label="コードをコピー"
      tooltip="表示中のコード例をコピーします。"
      tooltipOpenOnClick
    >
      <IconCopy className="h-4 w-4" />
    </TooltipButton>
  );
}

設計の判断

  • ツールチップ付きのボタンを1つの部品にした。Button を Tooltip で巻く形を画面ごとに書くと、asChild の付け忘れや、トリガーとボタンの二重のフォーカス管理で壊れます。ここに寄せて、tooltip を渡すだけで済むようにしました。
  • 触った瞬間にツールチップを畳む口を用意した。tooltipCloseOnPress を渡すと、押した瞬間に吹き出しが閉じ、指を離すまで再び開きません。スマホでは「触る」がホバーも兼ねるので、押したあとも説明が画面に残って邪魔になるためです。
  • 押したあとに出す使い方もできる。tooltipOpenOnClick を渡すと、押したときだけ開いて既定 1600ms で閉じます。ただしこれは説明ではなく短い知らせなので、押した結果そのものを伝えるなら、読み上げに載る role="status" を使ってください（CopyButton がその形です）。
    一般のボタンの設計は UIXHERO の「ボタン」にあります。

使用コンポーネント

TooltipButtonButtonTooltip

関連コンポーネント

ToggleCollapsiblePanelToggleEditableField

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIXHERO: ボタン（Button）近い記事