[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip

見た目は普通のツールチップ。軽快なアニメーションで表示されるのも、表示方向を指定できるのも探せばあると思います。

しかしその中身はピュアCSS、1kbの超軽量スタイルシートで実装された、スマホもサポートされたツールチップのライブラリを紹介します。

サイトのキャプチャ

Microtip
Microtip -GitHub

Microtipのデモ

Microtipの実際の動作は、デモページでご覧ください。

サイトのキャプチャ

デモページ

「Top」「Top Right」とあるように、それぞれその方向にツールヒントが表示されます。

デモのアニメーション

デモのアニメーション

スマホではホバー操作がないため、タップするとツールヒントが表示されます。

サイトのキャプチャ

スマホで表示

Microtipの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして、記述します。

スタイルシートファイルは、CDNでも用意されています。

Step 2: HTML

HTMLも非常にシンプルです。
ツールヒントを表示する要素に「aria-label」と「role="tooltip"」を追加し、「aria-label」にメッセージを記述します。あとは、表示方向を指定するだけです。

表示方向を変更するには、「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秒後にease-outのアニメーションを適用しながら0.5秒間変化します。フォントサイズは13pxで、太字で大文字です。

サポートブラウザ

CSSの変数を使用しているため、IEは非対応です。

サイトのキャプチャ

CSSの変数のサポート状況

top of page

©2017 coliss