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

CSSだけで作る！マウスオーバー時に表示されるツールチップの実装方法

Webサイトやアプリのユーザビリティを向上させる要素のひとつに「ツールチップ」があります。ツールチップとは、要素にマウスカーソルを重ねたとき（ホバー時）に表示される小さな説明文のことです。JavaScriptを使わなくても、CSSのvisibilityプロパティと:hoverセレクタを組み合わせることで、簡単に実装できます。

CSSでツールチップを作成する基本の仕組み

実装のポイントは以下の2つです。

  • visibility: hidden; — ツールチップのテキストを初期状態では非表示にします
  • :hover — 親要素にマウスカーソルが重なったときに、visibility: visible;へ切り替えて表示します

実装サンプルコード

以下のコードをそのままHTMLファイルに保存してブラウザで開くと、動作を確認できます。テキスト部分にマウスを重ねてみてください。

<!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">ここにマウスを重ねてください
      <p id = "mytext">ツールチップのテキスト</p>
   </div>
</body>
</html>

コードの解説

1. ツールチップ本体のスタイル（#mytext）

#mytooltip #mytextでは、ツールチップとして表示するテキストの見た目を定義しています。background-color: black;とcolor: #fff;で黒背景に白文字のコントラストを確保し、border-radius: 3px;で角を丸くすることで、一般的なツールチップらしいデザインにしています。また、position: absolute;とz-index: 1;により、他の要素の上に重ねて表示されます。

2. ホバー時の表示切り替え（:hover）

#mytooltip:hover #mytextは、「親要素である#mytooltipにマウスカーソルが乗ったとき、子要素の#mytextを表示する」という意味です。これにより、マウスが離れると自動的に非表示に戻ります。

カスタマイズのヒント

  • transitionプロパティを追加すると、ふわっとしたフェードイン・アウトのアニメーション効果を付けられます
  • widthやpaddingを調整して、テキスト量に合わせたサイズに変更できます
  • topやleftを指定すれば、ツールチップの表示位置（上・下・左右）も自由に制御できます

このように、CSSだけでもシンプルかつ軽量なツールチップを実装できます。ぜひ自分のサイトに合わせてカスタマイズしてみてください。

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

    Webページでテキストやボタンにマウスカーソルを合わせたときに、補足説明がふわりと表示される「ツールチップ」。JavaScriptを使わなくても、CSSだけでも簡単に実装できることをご存じでしょうか。この記事では、CSSのposition、visibility、opacity、そして:hover擬似クラスを組み合わせて、吹き出し付きのツールチップを作成する方法を紹介します。ツールチップの仕組み基本的な仕組みは以下の通りです。親要素（.tooltip）にposition: relative;を指定し、基準位置とします。ツールチップ本体（.toolText）はposition: absolute;

  2. CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説

    CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "