cssでツールチップを表示する「hint.css」
制作の佐々木です
jQueryでツールチップを表示させたりするプラグインもありますが
「hint.css」はjQueryではないので軽量かつ簡単にツールチップが実装できます。
ダウンロード
こちらのサイトの中央、右上にGithubへのリンクがあるのでそちらからダウンロードします。
内にcssを読み込みます
[html]
<link rel="stylesheet" href="css/hint.css">
[/html]
<link rel="stylesheet" href="css/hint.css">
[/html]
適応させたい箇所にクラスhint–topをつけdata-hintに表示させる文章を入れれば完成です。
[html]
<span class="hint–bottom" data-hint="下に表示">下</span>
[/html]
<span class="hint–bottom" data-hint="下に表示">下</span>
[/html]
オプション
オプションでツールチップの色を替えたり、出現方法も変更することができます
[html]
<span class="hint–info hint–rounded" data-hint="hint–info">hint–rounded</span>
[/html]
<span class="hint–info hint–rounded" data-hint="hint–info">hint–rounded</span>
[/html]
これは色をクラスhint–infoで変更し、クラスhint–roundedで角丸に変更しました。
サンプルにしてまとめてみました。
→サンプルはこちら
