CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」

Ads

Balloon.css


Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。

使い方は、data-balloonで表示させたいテキストを設定、data-balloon-posでツールチップの位置を設定します。upなら上、leftなら左、up-leftなら上で、矢印を左側に設定できます。また、data-balloon-lengthで吹き出しのサイズを設定できます。CSSのみのツールチップライブラリは過去にもいくつかありましたが、こちらが一番使い勝手がよさそうです。ライセンスはMIT。

Balloon.css