CSSのみで実現する軽量なツールチップ「Ballon.css」
WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.css」CSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.css — CSS tooltips fo
Simptip: a simple CSS tooltip made with Sass
A simple CSS tooltip made with Sass First of all let's talk about position. You can have a tooltip in different directions ( top , left , bottom , right ). Secondly as you know color is an important factor. You can also have a Tooltip in different color such as success , info , warning and danger. And finally other features like ( soft edge , half arrow , movable effect , fade effect , multiline t
Hint.css - A tooltip library in CSS
Only CSS. No JavaScript! Small file size. Only 1.5KB minified and gzipped! Easy to use. No config required. Supports Accessibility with aria-label attributes Works in all modern browsers. First get the library from the github repo. Then in your HTML, include the library CSS: <link rel="stylesheet" href="hint.css" /> Now, all you need to do is give your element any position class and tooltip text u
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Red Team Design
