ツールチップTooltipExperimental

状態とバリエーション

プロパティ

• 中身を触れないようにして、リンクやボタンを入れられなくした。資料は「Tooltip にリンクやボタンやフォームを含める」を禁止に挙げています。ホバーで開くものにカーソルを移そうとすると閉じてしまい、たどり着けないからです。GUNJO の TooltipContent は pointer-events-none を持つので、中に置いたものはそもそも押せません。押せるものが要る場面は Popover の仕事だ、という切り分けを部品の側で固定しました。
• 指で押したときも開く。資料は「必須の情報を Tooltip に入れると、モバイルとキーボードの一部の利用者が届かなくなる」を核に挙げています。GUNJO は openOnPress を既定で入りにし、指かペンで押したときは押した瞬間に開いて2.2秒後に閉じます（pressOpenDuration）。押せない理由やアイコンだけのボタンの名前を、スマホでも読めるようにするためです。それでも読み上げには届かないので、アイコンだけのボタンには aria-label を別に付けます。
• 幅を max-w-xs で頭打ちにした。資料は「テキストは短く、最大2行」と書いています。行数では止められないので、GUNJO は幅を20remで止めて中央寄せにしました。長い文を入れると縦に伸びて目に見えて不格好になるので、書いた時点で気づけます。出るまでの間は土台の Radix の既定のままで、必要なら delayDuration を渡して変えられます。

いつ・なぜ使うか（UIXHERO）

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