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

CSSでツールチップを作る方法｜サンプルコード付きで解説

CSSツールチップとは？

ツールチップ（Tooltip）は、要素に追加情報を設定するためのUIパーツです。訪問者がマウスポインターを要素の上に重ねると、Webページ上に補足説明がポップアップ表示されます。JavaScriptに頼らず、CSSだけでも手軽に実装できるのが大きな魅力です。

以下は、CSSのみを使用してツールチップを構築するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   text-align: center;
}
.toolTip {
   position: relative;
   display: inline-block;
   border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
   visibility: hidden;
   width: 160px;
   background-color: #721cd4;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   top: -35px;
   left: -10px;
   z-index: 1;
}
.toolTip:hover .toolText {
   visibility: visible;
}
</style>
<body>
<h1>Css tooltip example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip</h2>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

CSSでツールチップを作る方法｜サンプルコード付きで解説

「Hover over me」のテキスト部分にマウスカーソルを合わせると、以下のように紫のツールチップが現れます。

CSSでツールチップを作る方法｜サンプルコード付きで解説

コードのポイント

  • position: relative / absolute：親要素（.toolTip）にrelative、ツールチップ本体（.toolText）にabsoluteを指定することで、親要素を基準にした位置調整が可能になります。
  • visibilityの切り替え：通常時はhiddenで非表示にしておき、:hoverセレクターでvisibleに変更することで、マウスオーバー時にだけツールチップを表示させています。
  • z-index: 1：ツールチップが他の要素の下に隠れないよう、重なり順序を制御しています。
  • border-bottom：二重線の下線を付けることで、このテキストがホバー可能な要素であることを視覚的に示唆しています。
  1. CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

    Webサイトのパフォーマンス改善テクニックのひとつが「CSSイメージスプライト」です。複数の画像を1枚の画像ファイルにまとめることで、ブラウザがサーバーへ送信するHTTPリクエストの数を大幅に減らせます。リクエスト数が減ればサイトの読み込み時間は短縮され、ページの表示速度向上につながります。さらに、画像があらかじめ読み込まれた状態になるため、マウスオーバーなどのイベントで画像を切り替える際も動作がスムーズになり、画像の読み込み遅延によるちらつきを防ぐことができます。イメージスプライトとは？イメージスプライトとは、複数の小さな画像（アイコンなど）を1枚の大きな画像にまとめたものです。CSSのba

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ