Softonic

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

ステップ 1 / 2
次へ

ツールチップは、プロジェクトが真っ先にJavaScriptライブラリに頼りがちな要素ですが、data-tooltip属性で制御するシンプルな::after疑似要素だけで実際のケースの90%はカバーできます。このジェネレーターは、必要な.tooltipと.tooltip::afterのルールをそのまま出力します。上・下・左・右の表示位置を選び、背景色と文字色を調整して、生成されたブロックをスタイルシートにコピーするだけです。

ツールチップをHTMLに組み込む方法

  1. 1

    表示位置を選ぶ

    上・下・左・右から選びます。ジェネレーターは`calc(100% + 8px)`と適切なtransformを使うため、吹き出しがトリガー要素にぴったり寄り添って表示されます。

  2. 2

    色を選ぶ

    背景色は吹き出しに、文字色はツールチップのラベルに適用されます。読みやすさのため、コントラスト比は4.5:1以上を保ちましょう。

  3. 3

    CSSをコピーする

    生成されたブロックをスタイルシートに貼り付けます。`.tooltip`、`.tooltip::after`、そして`:hover`のルールが含まれています。

  4. 4

    トリガー要素にマークアップする

    任意の要素に`class="tooltip" data-tooltip="表示したいテキスト"`を追加します。`::after`は`content: attr(data-tooltip)`を通じてこの属性を読み取ります。

純CSSのツールチップ：得られるものと妥協すべきもの

CSSのみで作るツールチップは軽量かつ高速で、JavaScriptを無効にしても動作します。ただし、DOMのソース順の中に存在するため、設計時に考慮すべきいくつかの制約を受け継ぎます。

生成されるCSSが行うこと

  • トリガー要素をposition: relativeに設定し、絶対配置のツールチップをそこに固定します。
  • content: attr(data-tooltip)からラベルを取得するため、テキストを二重に書く必要がありません。
  • transition: opacity 0.15sで不透明度をアニメーションさせ、素早くも唐突ではない自然な表示にします。
  • 吹き出しにpointer-events: noneを指定し、トリガー要素へのクリックを妨げないようにします。

表示位置の計算

位置 オフセットのルール
上 bottom: calc(100% + 8px); left: 50%; translateX(-50%)
下 top: calc(100% + 8px); left: 50%; translateX(-50%)
左 right: calc(100% + 8px); top: 50%; translateY(-50%)
右 left: calc(100% + 8px); top: 50%; translateY(-50%)

アクセシビリティ上の注意点

  • data-tooltipはスクリーンリーダーに読み上げられません。その情報が重要な場合は、aria-labelや可視テキストと併用してください。
  • キーボード操作のユーザーには:hoverに加えて:focus-visibleが必要です。生成されたルールを.tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }のように拡張してください。
  • 祖先要素のoverflow: hiddenで切り取られると、ツールチップは見えなくなります。トリガー要素をクリッピングするコンテナの外に移すか、要素が密集したUIではJavaScriptで描画するポップオーバーに切り替えてください。

よくある質問

疑似要素を使えばDOMがすっきり保たれ、ラベルのテキストを二重に書かずに済み、他の要素と誤ってマッチする心配なくツールチップをスタイリングできます。ただし、::afterのコンテンツは支援技術にインデックスされないため、重要なテキストはaria-labelで補強してください。

はい。2つ目の疑似要素（例えば.tooltip::before）を追加し、幅・高さがゼロのボックスに色付きのボーダーを組み合わせて形作ります。これは定番のCSS三角形テクニックです。このシリーズの「CSS三角形ジェネレーター」を使えば、必要なボーダーの宣言をそのまま生成できます。

::afterのルールにtransition-delay: 0.3sを追加し、ホバーが外れたときには0にリセットします。あるいはtransition: opacity 0.15s 0.3s;を使い、消えるタイミングを遅らせずに表示だけを遅らせることもできます。

選択した位置と色は CSS を生成するために当社のサーバーへ送信されますが、保存や再利用はされません。複数ステップのページではリンクを通じてステップ間を移動します。単一ページの表示では何も保持されません。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

変更ログジェネレーター

分類した項目から Keep a Changelog 形式の Markdown セクションを作成します。Added、Changed、Fixed、Removed の各カテゴリに項目を貼り付け、Markdown かプレーンテキストを選んで出力をコピーするだけです。

このツールは他の言語でも利用できます