CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけでツールチップを作成する方法をわかりやすく解説

Webページでテキストやボタンにマウスカーソルを合わせたときに、補足説明がふわりと表示される「ツールチップ」。JavaScriptを使わなくても、CSSだけでも簡単に実装できることをご存じでしょうか。

この記事では、CSSのposition、visibility、opacity、そして:hover擬似クラスを組み合わせて、吹き出し付きのツールチップを作成する方法を紹介します。

ツールチップの仕組み

基本的な仕組みは以下の通りです。

  • 親要素（.tooltip）にposition: relative;を指定し、基準位置とします。
  • ツールチップ本体（.toolText）はposition: absolute;で配置し、初期状態ではvisibility: hidden;とopacity: 0;で非表示にしておきます。
  • 親要素にマウスカーソルが乗ったとき（:hover）、ツールチップを表示させます。
  • ::after疑似要素を使えば、下向きの三角形（矢印）もCSSだけで描画できます。

サンプルコード

実際のコードは以下の通りです。

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
        font-size: 20px;
        font-weight: bolder;
        color: blue;
    }
    .tooltip .toolText {
        visibility: hidden;
        width: 120px;
        background-color: rgb(89, 166, 255);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 10px 20px;
        font-weight: normal;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .tooltip .toolText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
    .tooltip:hover .toolText {
        visibility: visible;
        opacity: 1;
    }
</style>
<body>
<h1>Tooltip Example</h1>
<div class="tooltip">
Hover Here
<span class="toolText">Some Random Text</span>
</div>
<p>Hover over the above text to see tooltip in action</p>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。青色のテキスト「Hover Here」の下には点線が引かれ、ホバー可能であることが視覚的に示されています。

CSSだけでツールチップを作成する方法をわかりやすく解説

このテキストにマウスカーソルを合わせると、上方向にツールチップがフェードインで表示されます。transition: opacity 0.3s;のおかげで、表示が滑らかにアニメーションする点もポイントです。

CSSだけでツールチップを作成する方法をわかりやすく解説

ポイントのまとめ

  • bottom: 125%; … ツールチップをテキストの上方に配置します。
  • left: 50%; margin-left: -60px; … ツールチップ幅（120px）の半分だけ左にずらすことで、中央揃えを実現しています。
  • ::after疑似要素 … borderの色設定を工夫することで、下向きの矢印を描画しています。

表示位置や配色を変更すれば、下向き・右向き・左向きのツールチップにも応用できます。ぜひ自分のサイトに合わせてカスタマイズしてみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>