Taggdを使って簡単な画像ツールチップラベルを追加する

あなたはFacebookがあなたを可能にする方法を知っている ラベル面 写真で？まあ, Taggd CSS / JSと同等のものです。 表記するためにドットを使う ツールチップが画像のどこに表示されるか.

図書館は完全に無料です、そして 依存関係を必要としない jQueryなど。それ 純粋なバニラJavaScriptで動作します, そしてセットアップはとても簡単です.

Taggdのホームページからもう少し学ぶことができます。 デモといくつかの基本的な手順が含まれています はじめに.

へのリンクもあります オンライン文書 Docletsを使用して、JSドキュメンテーション用に作成されたきれいな小さなWebアプリケーションです。あなたはできる Taggdのバージョンを検索, または 現在のバージョンを閲覧する マスターブランチで.

そこから、あなたは得るでしょう 膨大な物件リスト あなたは使うことができます。各文書は以下の関数で分割されています 画像を操作する （といった タグ付けする（） または getTag（））あなたに役立つ関数が続きます 特定のタグを操作する （といった setPosition（））.

繰り返しますが、すべて バニラJavaScriptで動作します だからあなたは構文の問題を心配する必要はありません.

はじめに GitHubリポジトリをチェックしてください。, そしてセットアップの指示に従ってください.

TaggdのCSSファイルとJSファイルを追加するだけです。 あなたの中に セクション , その後 新しいインスタンスを作成する Taggd要素のこれらは定義することができます 一つずつ または 配列で.

それから 画像にそれらを追加する, そしてプレスト！あなたはすべて行く準備が整いました.

私が見てみたいです タグラベルをカスタマイズするための追加機能, そして形を変えなさい。小さなピンクのドットではなく、オブジェクトを囲むように正方形のタグを作成するのは素晴らしいことです。しかし、依存関係のない無料のライブラリでは、あまり文句を言うことはできません。.

これまでにこの図書館は作られています 最近のブラウザのみ, グレースフルデグラデーションはサポートしていません。しかしながら、あなたはいつでもrepoページで問題を開くことができるか、あなたが何か単純な問題を見かけたら他の問題を解決しようとすることができます。それにもかかわらず、Taggdはまだプラグインの大部分であり、それはあらゆるプロジェクトに使用するのが実用的です.

著者のホームページをチェックしてください。 サンプルコード そして DLリンク と一緒に ドキュメントページへのリンク.

そして、質問や提案がある場合は、作成者Tim SeverienにTwitterの@TimSeverienでメッセージを送ってください。.