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

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

HTMLとCSSだけでツールチップを作成する簡単なサンプルコードとデモを記述してます。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

ツールチップとは

ツールチップとは対象の要素にマウスオーバーした際に表示される補足説明などのことを言います。

サンプルコード

以下はHTMLとCSSだけでツールチップを作成するサンプルコードとなります。

ブラウザ上で表示した結果

この部分をマウスオーバー、スマホの場合はタップしてください。

吹き出しの位置は「.tooltip:hover .tooltip_description」で指定して、吹き出しの矢印は「transform: rotateZ(180deg);」回転できます。