Zenn
🔦

HTMLだけでツールチップ(ヒント)を表示する

2021/10/22に公開
CSS
HTML
tech

こんなのを実装します

CodePenの埋め込みの中にあるボタンにカーソルを合わせてみてください。

「WORLD!」とヒントのようなものが出てくるはずです。(PCじゃないとワカラナイかも!!)
これこそがツールチップです。


うーん、これはスマホ読者のためのスクショ！

今回はこのツールチップをHTML/CSS初心者でも分かるような方法で実装します。

Hint.cssを使う

今回は簡単に実装できるようにHint.cssというライブラリを使用します。

https://kushagra.dev/lab/hint/

このライブラリを使用するだけで色々なタイミングで使えるツールチップを実装することが出来ます。

実装方法

CSSライブラリをhead内で読み込んでclassとdata-hintを指定するだけで実装することが出来ます。

<head>
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/hint.css@2.7.0/hint.min.css"/>
</head>
<body>
	<span class="hint--bottom" data-hint="WORLD!">HELLO</span>
</body>

表示方法の変更

吹き出しの向きの変更

  • hint--topをクラスに追加する事で上から
  • hint--bottomをクラスに追加する事で下から
  • hint--leftをクラスに追加する事で左から
  • hint--rightをクラスに追加する事で右から

吹き出しの色の変更

  • 何も指定しないとデフォルトの灰色
  • hint--errorをクラスに追加する事で赤色(エラー)
  • hint--infoをクラスに追加する事で青色(info)
  • hint--warningをクラスに追加する事で黄色(注意)
  • hint--successをクラスに追加する事で緑色(成功)

吹き出しのサイズの変更

  • hint--smallをクラスに追加する事で小さめ
  • hint--mediumをクラスに追加する事で普通
  • hint--largeをクラスに追加する事で大きめ
例(全部盛り)
<span class="hint--bottom hint--success hint--medium" data-hint="WORLD!">HELLO</span>

Discussion