制作 佐々木

cssでツールチップを表示する「hint.css」


blog2015092801

制作の佐々木です
jQueryでツールチップを表示させたりするプラグインもありますが
「hint.css」はjQueryではないので軽量かつ簡単にツールチップが実装できます。

ダウンロード

こちらのサイトの中央、右上にGithubへのリンクがあるのでそちらからダウンロードします。

内にcssを読み込みます

[html]
<link rel="stylesheet" href="css/hint.css">
[/html]

適応させたい箇所にクラスhint–topをつけdata-hintに表示させる文章を入れれば完成です。

blog2015092802

[html]
<span class="hint–bottom" data-hint="下に表示">下</span>
[/html]

オプション

オプションでツールチップの色を替えたり、出現方法も変更することができます

[html]
<span class="hint–info hint–rounded" data-hint="hint–info">hint–rounded</span>
[/html]

blog2015092803
これは色をクラスhint–infoで変更し、クラスhint–roundedで角丸に変更しました。
サンプルにしてまとめてみました。
→サンプルはこちら


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。