ツールチップ

ツールチップ 1

  • HTML
  • CSS

<button>要素にフォーカスされた場合やホバーした時に動作する、軽量なCSSツールチップになります。

See the Pen 【ツールチップ】1 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 動作させるために、<button>要素を使用しています。
  2. マウスホバーや、TABキーでの操作が可能になっています。

ツールチップ 2

  • HTML
  • CSS

<span>要素にフォーカスされた場合やホバーした時に動作する、軽量なCSSツールチップになります。

See the Pen 【ツールチップ】2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 動作させるために、<span>要素を使用しています。
  2. マウスホバーや、TABキーでの操作が可能になっています。

ツールチップ 3

  • HTML
  • CSS

枠有の吹き出し風ツールチップです。

See the Pen 【ツールチップ】3 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. ツールチップにborderで枠線をつけています。
  2. 吹き出し風の三角には、borderを使用した三角形を、class="tooltip"に対して ::before と ::after で生成配置しています。