Question

我正在制作一个使用Kinetic.js的网络应用程序图形函数，我希望在用户将鼠标悬停在每个元素上时显示一个工具提示，其中包含有关每个元素的一些信息。

我已经想出如何使用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不会创建任何可用的DOM元素来用作opentip的目标。

这是（大致）我的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();
}

唯一的问题是它只是显示在页面的左上角，我在文档中找不到关于如何手动定位此内容的任何内容。

欢迎提出建议或想法。如有必要，我也愿意使用不同的工具提示库。

谢谢！

Answer 1

看起来（除了快速查看文档之外，不知道Opentip）你可以在配置中将'fixed'设置为true。由于目标为空，文档建议fixed = true应该使工具提示出现在鼠标位置，但是一旦移动鼠标就不会跟随它。

听起来怎么样？

Answer 2

我设法解决了这样的问题，对于那些正在寻找解决方案的人来说：

group.on("mousemove", function(event) {

    tooltip.content = //change content 
    tooltip.show();
    $("#opentip-1").offset({ left: event.offsetX, top: event.offsetY });

});

手动将opentip工具提示与Kinetic.js结合使用

2 个答案: