いくつかの凝ったグラフィカル関数にKinetic.jsを使用するWebアプリケーションを作成しています。ユーザーがその要素にカーソルを合わせたときに、各要素に関する情報をツールチップに表示したいと思います。
Kinetic.jsを使用してホバー時に関数を呼び出す方法はすでに理解しています。
myKineticObject.on("mousemove", function() {
// Change content of tooltip depending on myKineticObject
// Set position of tooltip to cursor position
// Show tooltip
});
myKineticObject.on("mouseout", function() {
// Hide tooltip
}
ツールチップを表示するために、一見素敵なOpentipを使用することにしました。唯一の問題は、Kinetic.jsがopentipのターゲットとして使用できる使用可能なDOM要素を作成しないことです。
これは(大まかに)私のHTMLがどのように見えるかです:
<html>
<head><!-- Styles --></head>
<body>
<div id="container">
<canvas class = "kineticjs-buffer-layer">
<canvas class = "kineticjs-path-layer">
<canvas class = "myLayer1">
<canvas class = "myLayer2">
<!-- ... more layers -->
</div>
<!-- Scripts -->
</body>
</html>
知っておくべき重要なことは、これらのキャンバス要素はすべて同じ幅と高さを持ち、互いに積み重なっているということです。したがって、それらはターゲットとして使用できません。
そのため、ツールチップのターゲットとして使用するDOM要素を使用する代わりに、ツールチップを手動で表示/非表示にして配置する必要があります。私はこのように表示と非表示を行う方法を理解しました:
var tooltip = new Opentip(
"div#container", //target element
"DummyContent", // will be replaced
"My Title", // title
{
showOn: null, // I'll manually manage the showOn effect
});
私は今、次のことをします:
myKineticObject.on("mousemove", function() {
tooltip.show();
});
myKineticObject.on("mouseout", function() {
tooltip.hide();
}
唯一の問題は、ページの左上に表示されるだけであり、これを手動で配置する方法についてのドキュメントには何も見つかりません。
提案やアイデアを歓迎します。必要に応じて、別のツールチップライブラリを使用することもできます。
ありがとう!