2022/11/02 (更新日: 2024/01/04)

HTMLとCSSだけで作るツールチップ

今回は、HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。
ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます

どちらの方法で作成してもツールチップとしての挙動に変わりはありませんが、記述するコードが若干変わりますので好みや運用のしやすさなどでどちらかを選んでいただければ良いかと思います。

HTML要素を使用して作るツールチップ

はじめに、HTML要素を使って作るツールチップを紹介します。
ツールチップに表示させたいテキストをpタグやspanタグなどのHTML要素として記述します。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

HTML要素を使用したツールチップのサンプルと記述例

HTML要素を使用してテキストにツールチップを設置する場合のサンプルと記述例を紹介します。

テキストの一部ツールチップのテキストにマウスホバーするとツールチップを表示

HTMLの記述例では、ツールチップを表示させたいテキスト（今回の例では「一部」というテキスト）をspanタグで囲い、さらにツールチップ内に表示させたいテキスト（今回の例では「ツールチップのテキスト」というテキスト）をspanタグで囲って設置しています。

HTML
<p>テキストの<span class="text-tooltip">一部<span class="tooltip-content">ツールチップのテキスト</span></span>にマウスホバーするとツールチップを表示</p>

CSSの記述例では、ツールチップ内に表示させたい要素をあらかじめ非表示にしておき、「一部」というテキストにマウスホバーした時に表示するように記述をしています。

CSS
.text-tooltip {
  border-bottom: dotted 1px #333;
  position: relative;
}

.tooltip-content {
  opacity: 0;
  visibility: hidden;
  font-size: 70%;
  white-space: nowrap;
  border-radius: 5px;
  background-color: #555;
  color: #fff;
  padding: 5px 10px;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  transition: all .6s ease-in-out;
}
  
.tooltip-content:before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(50% - 9px);
  border: 9px solid transparent;
  border-top: 9px solid #555;
}
  
.text-tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

CSSのattr関数を使用して作るツールチップ

次に、CSSのattr()関数を使って作るツールチップを紹介します。
ツールチップに表示させたいテキストをCSSのattr()関数を利用して取得するために、HTMLタグに属性と属性値を記述します。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

CSSのattr関数について

CSSのattr()関数を利用することで、任意の要素の属性値を受け取りスタイルシートの中で使用することができます。
これを利用してツールチップを設置することができます。

・CSSのattr関数について詳しくは、下記参考ページを見てみてください。
[参考]：attr() – CSS: カスケーディングスタイルシート | MDN

CSSのattr関数を使用したツールチップのサンプルと記述例

CSSのattr関数を使用してテキストにツールチップを設置する場合のサンプルと記述例を紹介します。

テキストの一部にマウスホバーするとツールチップを表示

HTMLの記述例では、ツールチップを表示させたいテキスト（今回の例では「一部」というテキスト）をspanタグで囲い、このspanタグに属性（今回の例では「tooltip-data」という属性）と属性値（今回の例では「ツールチップのテキスト」という属性値）を設置しています。

HTML
<p>テキストの<span class="tool-tip under-line" tooltip-data="ツールチップのテキスト">一部</span>にマウスホバーするとツールチップを表示</p>

CSSの記述例では、.tool-tipの擬似要素である.tool-tip:beforeのcontentでattr()関数を利用してHTMLで設置した属性「tooltip-data」の属性値を取得してマウスホバーした時だけ表示するように記述をしています。

CSS
.under-line {
  border-bottom: 1px dotted #333;
}

.tool-tip {
  position: relative;
}
    
.tool-tip:before {
  content: attr(tooltip-data);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  white-space: nowrap;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  transform: translateX(-50%);
  border-radius: 5px;
  z-index: 1;
  transition: all .6s ease-in-out;
  top: -43px;
  left: 50%;
  font-size: 70%;
}
    
.tool-tip:after {
  content: "";
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: -11px;
  left: calc(50% - 8px);
  transition: all .6s ease-in-out;
  border: 9px solid transparent;
  border-top: 9px solid #555;
}

.tool-tip:hover:before, 
.tool-tip:hover:after {
  opacity: 1;
  visibility: visible;
}

以上、HTMLとCSSを利用してツールチップを作成する方法について紹介してきました。
参考になりましたら幸いです。