HTML5キャンバスに描画されたイメージにツールチップを追加することはできますか？

Question

HTML5キャンバスを使用して線や棒グラフを描画したいと思います。

Iノード/バーの上にグラフ

ホバーを描く

• 外部ソースからデータを取り込む（またはテスト目的のためにそれをハードコーディング）

• たい番号/関連データを表示するツールチップが表示されます。

だから私の質問は、個々の画像/ライン/キャンバス上の何にもツールチップを適用することが可能ですか？ （キャンバス自体にツールチップがあることが分かります）

私は確かにうまくいくでしょうが、それぞれのノードを独自のツールチップと画像で別々のキャンバスにすることです。

私は理想的にはjquery.ui.tooltipを使用したいと思いますが、実際には何か動作するかどうかを知りたいだけです。

var imageObj = new Image(); 
    $(imageObj).attr("title","kitten"); 
    $(imageObj).tooltip(); 

    imageObj.onload = function(){ 
    context.drawImage(imageObj, destX, destY, destWidth, destHeight); 
    }; 
    imageObj.src = "BW-kitten.jpg"; 

私はhereからアウトラインを持って、私はおそらく仕事ができると思ったものを追加しました。

子猫は適切に描かれており、コンソールエラーやそのすべてがうまくいきません。

Answer 1

HTML5（より良い単語の欠如のため）シェイプはキャンバスに描画され、技術的に存在しません。カスタムハンドラを使用してこれらの図形の正確な位置を管理し、通常のDOM要素と同様の機能を追加するプラグインがいくつかあります。

通常の形状のシンプルさに従い、簡単な方法で複雑な図形を使用できるので、私はHTML5プロジェクトでKineticJSを使用します。 Here is a KineticJS exampleは、ツールチップをその図形に追加します。

Kinetic.Imageをthe documentationから簡単にステージに追加して、以前にリンクされた例に従って、シェイプにツールチップを追加する方法があります。