Webデザイナーさん、ツールチップを使っていますか？
ツールチップはメニューや文章、画像等のメディアに注釈を与える機能です。
bootstrap等のモダンなCSSフレームワークを使っているのであれば
デフォルトでtooltip機能が搭載されていることが多いですが、
自前のCSSで作られているサイト等はどうでしょうか？
恐らくjquery等のjavascriptに依存したプラグインを導入することが多いと思います。
一度導入すれば簡単に使えますが、初期化の為にjavascripを書く必要があったり、
ニュースサイトやブログの記事内では使いづらかったりすると思います。
今回紹介するのは、CSSオンリーで使えるツールチップ プラグイン「HINT.css」です。
Hint.css
このHINT.css、SASSで作られており、
導入も簡単でCSSをインポートするだけで直ぐに使えます。
それでは少し使ってみましょう。
HINT.cssの導入
html上で使う場合に必要なものは、hint.cssのファイル一つだけです。
( *jquery等のライブラリ依存や、javascriptでの初期化作業の必要はありません )
<link href="/hint.css/hint.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/1.3.6/hint.min.css" rel="stylesheet" />
マークアップ デモ (マウスカーソルを合わせるかクリックしてください)
<span class="hint--top" data-hint="上に表示されました">上に表示</span>
上に表示
<span class="hint--bottom" data-hint="下に表示されました">下に表示</span>
下に表示
<span class="hint--right" data-hint="右に表示されました">右に表示</span>
右に表示
<span class="hint--left" data-hint="左に表示されました">左に表示</span>
左に表示
<span class="hint--top hint--error" data-hint="赤色に表示されました">赤色に表示</span>
赤色に表示
<span class="hint--top hint--warning" data-hint="黄色に表示されました">黄色に表示</span>
黄色に表示
<span class="hint--top hint--info" data-hint="青色に表示されました">青色に表示</span>
青色に表示
<span class="hint--top hint--success" data-hint="緑色に表示されました">緑色に表示</span>
緑色に表示
<span class="hint--top hint--rounded" data-hint="角が取れて丸みが出ました">丸みがある表示</span>
丸みがある表示
Summary
「HINT.css」はタグにclassと「data-hint="text"」属性を追加するだけなので
Wordpress等に搭載されているwysiwygエディタ上でも比較的簡単に扱うことが出来ます。
また、bowerからもインストール可能です。
既存のサイトにもクラス名の衝突を考えずに導入出来るので、
自前のCSSで構築されたWebサイトをお使いの方や、
文章をコンパクトにまとめたい人は導入を考えてみてはいかがでしょうか。
