Wenkを使用してピュアCSSで縮小ツールチップを作成する

そのような奇妙な名前では、あなたはあまり期待できないでしょう。 ウェンク, 無料 CSSツールチップライブラリ. それでも 最も小さい図書館の1つ gzipしたときに1KB以下で計測できます.

ウェンクの用途 純粋なCSSと データ-* 属性 作成する ライブツールチップ あなたは自分の好みに合わせてスタイルを変えたり位置を変えたりできる。何よりも良いのは、GitHubでソースコードを入手できる完全無料のライブラリです。.

これらの軽量のツールチップはあなたのウェブサイトに追加するのがとても簡単です。あなただけが必要です Wenk.css ファイル ページヘッダーに追加しました, GitHubリポジトリからダウンロードできます。.

または、あなたも CDNファイルを追加する これはGitHubのCDNでホストされています。そのためのコードは次のとおりです。

あるいは、あなたがnpm / bowerファンなら、このパッケージをインストールすることができます。 ターミナルから.

デフォルトのツールチップタグには、多くのカスタムデータがありません。彼らはあなたを聞かせて 位置と幅を選択, しかしあなたはする必要があります CSSを手動で変更する あなたがそれらを異なるスタイルにしたいのなら.

たとえば、tooltip要素の上に表示されるツールチップにCSSの矢印を追加することができます。これは非常に簡単に作成できますが、Wenkスタイルシートを次のように洗練する必要があります。 正確なCSSクラスを見つける 拡張します.

これはいくつかのサンプルです。 デフォルトコード Wenkツールチップの場合：

   右にウェンク!  

メインのWenkランディングページには ライブデモ ホバリングすることでテストできます。これらは 最も基本的なツールチップ あなたは得るでしょうが、それらは1キロバイト以下の重さの図書館には完璧です。.

考慮すべき1つの大きなことは ブラウザサポート. ChromeとFirefoxの全バージョン うまくいくはずです. Opera 12以降およびOpera Mini v8以降でも同じです。しかし、IE8とIE10は 困っている これらのツールチップをレンダリングします。ありがたいことに、彼らの市場シェアは急速に落ち込んでいますが、それは使用する前に考慮すべきことです。.

私はまだあなたがとても少ないKBでいくらでもできるのに驚いています。 Wenkライブラリは現代のフロントエンド開発の証であり、少しでも長い道のりが使えることを示しています.

あなたは通り抜けることができます ソース全体 GitHubでは、 ライブデモ そして コードスニペット 自分のサイト用にこれらのツールチップを設定して作成する.