CSSツールチップジェネレーター

CSSツールチップジェネレーター: 用途

ツールチップは、ボタンやアイコンにマウスを重ねると表示される短いヒントです。このジェネレーターは、CSSだけで4つの位置に対応したヒントを作ります。矢印は任意で、色、角、遅延も設定でき、マウスが通り過ぎただけではちらつきません。

コードはアクセシブルです。ヒントはaria-describedbyでボタンと関連付けられ、role=tooltipを持ち、キーボードやタッチで要素がフォーカスされたときにも表示され、動きを減らす設定にも配慮しています。プレビューには試せるボタンが3つあります。

使い方

1. 位置、色、角を選びます。
2. 遅延と矢印を調整します。
3. HTMLとCSSをコピーします。

使うタイミング

• テキストのないアイコンの説明。
• フォームのヒント。
• ダッシュボードの操作ボタン。

よくある質問

ツールチップはスマートフォンでも動きますか？

スマートフォンにはマウスオーバーがないため、ボタンやリンクをタップして要素がフォーカスされたときにヒントが表示されます。そのため、必ず必要な情報はツールチップに入れず、ページ本文にも書いてください。

アクセシビリティはどうなっていますか？

ヒントのテキストはrole=tooltipの要素に入り、aria-describedbyでボタンと関連付けられ、スクリーンリーダーがボタン名と一緒に読み上げます。キーボードフォーカス（focus-visible）でも表示され、色だけに頼りません。

表示までに遅延があるのはなぜですか？

少し遅らせることで、マウスが別の場所へ向かう途中で通り過ぎただけのときにヒントがちらつくのを防ぎます。消えるときはすぐに消えます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール