HTML/CSS

【CSS】attrと擬似要素を使ってツールチップ(補足情報)を実装

 

 

CSSシリーズは定期的やっていきたいですね。

今回は、マウスホバーすると表示されるツールチップのような補足情報をCSSだけで実装する方法です。

 

CSSだけでツールチップを実装する

See the Pen
css attr
by kei (@kei_01011)
on CodePen.

方法は簡単で、attr()関数を使ってツールチップを表示させます。

結論を一言で言うと、

親要素の属性の値をattr()関数で受け取って、擬似要素で表示させる

こんな感じになりますが、噛み砕いて解説していきます。

 

HTML

<div>
  <span aria-label="テキストテキストテキスト">ツールチップ表示</span>
</div>

 

親要素に表示テキスト情報を記述、これが親要素になります。

これが、予め画面上に表示されているテキスト。

 

spanタグの aria-lagel属性の中に、補足情報として表示させたいテキストを入力しておきます。

この属性情報を、attr()関数で受け取って擬似要素で表示させます。

 

attr()関数を擬似要素で使う

span {
  position: relative;
  color: blue;
  cursor: pointer;
}
span:hover:before {
    opacity: 1;
}

span:before {
  content: attr(aria-label);
  opacity: 0;
  position: absolute;
  top: 30px;
  right: 0;
  font-size: 14px;
  width: 100px;
  padding: 10px;
  color: #fff;
  background-color: #555;
  border-radius: 3px;
  pointer-events: none;
}

div {
  padding: 40px;
  font-size: 20px;
}

 

方法は簡単で、contentにattr(属性名)を指定するだけです。

これで、親要素の属性値が返されます(この場合は、「テキストテキストテキスト」)

 

あとは、位置やサイズを整えたら完成です!

 

それにしてもattr()関数って便利。

覚えておけば何か他の用途にも使う機会があるかもしれませんので、頭の片隅に残しておきたいと思います。