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

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

ツールチップ（tooltip）とは、ユーザーがテキストや要素の上にマウスカーソルを重ねたときに表示される小さな吹き出し状のポップアップです。補足説明やヒントを表示できるため、ユーザーが画面の内容を理解しやすくなる便利なUIパーツです。

ツールチップの仕組み

CSSだけでも、JavaScriptを使わずにシンプルなツールチップを実装できます。基本の考え方は次の2点です。

  • visibility: hidden; でツールチップ部分をあらかじめ非表示にしておく
  • :hover 疑似クラスを使い、マウスオーバーされた瞬間に visibility: visible; へ切り替えて表示する

サンプルコード

以下のコードを実行して、実際にツールチップがどのように動作するか確認してみましょう。

<!DOCTYPE html>
<html>
   <style>
      #mytooltip #mytext {
         visibility: hidden;
         width: 100px;
         background-color: black;
         color: #fff;
         text-align: center;
         border-radius: 3px;
         padding: 10px 0;
         position: absolute;
         z-index: 1;
      }
      #mytooltip:hover #mytext {
         visibility: visible;
      }
   </style>
   <body>
      <div id = "mytooltip">Hover the mouse over me
         <p id = "mytext">My Tooltip text</p>
      </div>
   </body>
</html>

コードの解説

このサンプルでは、テキスト「Hover the mouse over me」の上にマウスカーソルを乗せると、「My Tooltip text」という黒背景のツールチップが表示されます。

  • #mytext：ツールチップ本体です。visibility: hidden; により通常時は非表示になっており、background-color や border-radius などで見た目を整えています。
  • #mytooltip:hover #mytext：親要素にマウスが乗ると、子要素の visibility が visible に変わり、ツールチップが表示される仕組みです。

まとめ

visibility プロパティと :hover 疑似クラスを組み合わせるだけで、追加ライブラリなしに手軽なツールチップを作成できます。表示位置の調整には position: absolute; と z-index が活用されている点も覚えておきましょう。

  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>