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数値文字参照を表示します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

HTML文字参照

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

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