CSSのみで実装できる吹き出し風のツールチップ「Balloon.css」!

2016/03/24

こんにちは。
今回はCSSのみで実装できる吹き出し風のツールチップ「Balloon.css」!です。

CSSだけで制作されたなめらかなアニメーションのツールチップを手軽に実装できるライブラリを紹介します。

CSSのみで実装できる吹き出し風のツールチップ「Balloon.css」!

Balloon.css

balloon-css

 

「Balloon.css」をダウンロードしてみよう!

https://github.com/kazzkiq/balloon.cssにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「Balloon.css」を設置してみよう!

balloon.cssをhead内に読み込みます。

 

html部分を記述します。
data-balloon-posで表示する位置を指定します。
up,left,right,down

 

data-balloon-lengthで横幅を指定します。
small,medium,large,xlarge,fit

 

現場のプロが教えるSEOの最新常識
現場のプロが教えるSEOの最新常識

 

いかがでしたか。簡単に実装できるので便利ですね。
以上でCSSのみで実装できる吹き出し風のツールチップ「Balloon.css」!でした。

Related Post

topへ戻る