こんにちは。
今回はCSSのみで実装できる吹き出し風のツールチップ「Balloon.css」！です。
CSSだけで制作されたなめらかなアニメーションのツールチップを手軽に実装できるライブラリを紹介します。
CSSのみで実装できる吹き出し風のツールチップ「Balloon.css」！
Balloon.css
「Balloon.css」をダウンロードしてみよう！
https://github.com/kazzkiq/balloon.cssにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「Balloon.css」を設置してみよう！
balloon.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="css/balloon.css"> |
html部分を記述します。
data-balloon-posで表示する位置を指定します。
up,left,right,down
1 2 3 4 | <button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button> |
data-balloon-lengthで横幅を指定します。
small,medium,large,xlarge,fit
1 2 3 4 5 | <button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button> <button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button> <button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button> <button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button> <button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button> |
いかがでしたか。簡単に実装できるので便利ですね。
以上でCSSのみで実装できる吹き出し風のツールチップ「Balloon.css」！でした。
