[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip
Post on:2017年6月22日
sponsors
見た目は普通のツールチップ。軽快なアニメーションで表示されるのも、表示方向を指定できるのも探せばあると思います。
しかしその中身はピュアCSS、1kbの超軽量スタイルシートで実装された、スマホもサポートされたツールチップのライブラリを紹介します。
Microtipのデモ
Microtipの実際の動作は、デモページでご覧ください。
「Top」「Top Right」とあるように、それぞれその方向にツールヒントが表示されます。
デモのアニメーション
スマホではホバー操作がないため、タップするとツールヒントが表示されます。
スマホで表示
Microtipの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして、記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="microtip.min.css"> </head> |
スタイルシートファイルは、CDNでも用意されています。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css"> </head> |
Step 2: HTML
HTMLも非常にシンプルです。
ツールヒントを表示する要素に「aria-label」と「role="tooltip"」を追加し、「aria-label」にメッセージを記述します。あとは、表示方向を指定するだけです。
|
1 |
<button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip"> |
表示方向を変更するには、「data-microtip-position」の値を変更します。
- top
- top-left
- top-right
- bottom
- bottom-left
- bottom-right
- left
- right
デフォルトでは、ツールチップはテキストを表示するのに必要なサイズで表示されます。「data-microtip-size」を加え、サイズを変更することも可能です。
- small
- medium
- large
- fit
カスタマイズ
MicrotipではCSSの変数を使用して実装されており、必要に応じてツールチップの動作をカスタマイズできます。
|
1 2 3 4 5 6 7 8 |
:root { --microtip-transition-duration: 0.5s; --microtip-transition-delay: 1s; --microtip-transition-easing: ease-out; --microtip-font-size: 13px; --microtip-font-weight: bold; --microtip-text-transform: uppercase; } |
上記のコードは、1秒後にease-outのアニメーションを適用しながら0.5秒間変化します。フォントサイズは13pxで、太字で大文字です。
サポートブラウザ
CSSの変数を使用しているため、IEは非対応です。
sponsors
