マイクロチップ - ネイティブのアクセシビリティ機能を備えたCSSツールチップライブラリ

GitHubでクイック検索をすると、何十ものカスタムツールチップライブラリを見つけることができます。そして毎月新しいウェブがヒットしているようです.

マイクロチップは純粋なCSSツールチップ上で動作し、カスタムの美学を提供し、そしてそれが 完全にアクセス可能 すべてのユーザー向け.

あなたがアクセシビリティについてあまり考えたことがないならば、マイクロチップはあなたの考えを変えるかもしれません。それはきれいなデザインとの完璧なブレンドです すべてのデバイス、すべてのブラウザ、および大きな障害があるユーザーのための機能.

ホームページには、マイクロチップライブラリへのダウンロードリンクと多数のコードデモがあります。.

この設定は、パッケージマネージャ、直接ダウンロード、またはCDNから直接取得することによって取得できます。それ CSSファイルが1つ付属しています そしてそれは基本的にあなたが必要とするすべてです.

マイクロチップをページに追加したら、ページ要素にツールチップを追加し始めることができます。これらは WAIに完全準拠 したがって、それらは現代のアクセシビリティ標準に完全に準拠しています。.

これは、カスタム位置を持つbutton要素に添付されたサンプルのツールチップコードです。

あまりコードが正しくない?

このライブラリは超軽量で、合計1KBのサイズに縮小されています。これらのツールチップでどれだけ得られるかを考えると、それはただ頭がおかしいです。.

カスタムCSSプロパティは、フォントサイズ、トランジションスタイル、イージング、その他多数の設定を定義するためにHTML属性を通して渡すことができます。.

あなたもすることができます ツールチップを大きくするためにCSSを直接​​上書きする 色やフォントが違う.

詳細についてはメインページのカスタマイズセクションを見てください。すべてHTMLとCSSを介して実行されるので、必要ありません。 スクリプトに関する知識 これを機能させるために.

マイクロチップは超 セットアップとカスタマイズが簡単 あなたが少なくとも基本的なフロントエンドコーディングを知っていればそれで大丈夫でしょう。.

しかし、GitHubレポジトリでセットアップ情報をもっと調べ、スタイルシートのコピーを入手してください。.

新機能について質問や提案がある場合は、Twitter @_ighoshの作成者にメールを送ってください。.