今すぐ使える!ツールチップCSSライブラリの一覧

テキストボックスやボタンなどにカーソルをあわせるとピョコっとでてくるツールチップですが、探してみると意外とたくさんライブラリが用意されています。

今回はオススメなツールチップライブラリを6個紹介していきます。

[スポンサーリンク]

Balloon.css


ニョキっとでてくるオーソドックスなツールチップです。使い方も簡単で拡張もしやすいので一番のオススメです。

ダウンロード&デモページはコチラです。

CSSのみでアニメーションツールチップが実現できます。

ライセンスはMITです。

ツールチップの色の変更方法はコチラにまとめました。ぜひ参考にして下さい。

microtip


Balloon.cssはニョキっとでてくるツールチップに対してこちらのライブラリはフワッとでてきます。

ダウンロード&デモページはコチラです。

CSSのみでアニメーションツールチップが実現できます。

ライセンスはMITです。

Tootik


ツールチップの出方はシュバッとでてきて今回紹介する中では一番カッコイイ出方ですね。
success、info、warning、dangerごとにツールチップの色が違うのも嬉しい特典です。

ダウンロードはコチラです。

デモページコチラです。(Usageをクリックしてください)

CSSのみでアニメーションツールチップが実現できます。

ライセンスはMITです。

Wenk


こちらもフワッとツールチップがでてきます。ツールチップ内にアイコンが装飾されているのでかわいらしいツールチップになっています。

ダウンロードはコチラです。

デモページコチラです。

CSSのみでアニメーションツールチップが実現できます。

ライセンスはMITです。

Tippy.js


タイトルはCSSライブラリといいながらも今回紹介する中で唯一JavaScriptを使用しているライブラリです。JavaScriptを使っているだけあってアニメーションはこっていますね。単純なアニメーションにあきたという人にはオススメです。

ダウンロード&デモページはコチラです。

jsが必要ですが、他ライブラリと比較してもよりスムーズでかっこいいアニメーションとなっています。

ライセンスはMITです。

Hint.css


こちらはBalloon.cssのようにオーソドックスなツールチップですが、Balloon.cssよりもオプションは豊富です。ツールチップの色を変更したり大きさを変えたりが簡単にできます。
しかし、商用では有償となるようなので注意が必要ですね。

ダウンロード&デモページはコチラです。

CSSのみでアニメーションツールチップが実現できます。

オープンソースライブラリですが個人利用に限り無料です。商用の場合だと料金が発生します。

さいごに

いかがでしたか?今回紹介しました6個のツールチップライブラリですが、使い方は簡単でアニメーションもそれぞれバリエーションに富んだものばかりです。

サイトのアクセントと簡単なヘルプにぜひ使ってみて下さい!

それでは!