Javascript 结合Kinetic.js手动定位opentip工具提示_Javascript_Tooltip_Kineticjs

Javascript 结合Kinetic.js手动定位opentip工具提示

javascript

Javascript 结合Kinetic.js手动定位opentip工具提示,javascript,tooltip,kineticjs,Javascript,Tooltip,Kineticjs,我正在制作一个web应用程序，它使用Kinetic.js来实现一些功能图形函数，我想在用户将鼠标悬停在每个元素上时显示一个工具提示，其中包含有关每个元素的一些信息我已经了解了如何使用Kinetic.js在hover上调用函数： myKineticObject.on("mousemove", function() { // Change content of tooltip depending on myKineticObject // Set position of tool

我正在制作一个web应用程序，它使用Kinetic.js来实现一些功能图形函数，我想在用户将鼠标悬停在每个元素上时显示一个工具提示，其中包含有关每个元素的一些信息

我已经了解了如何使用Kinetic.js在hover上调用函数：

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
}

我决定使用看似不错的工具来显示工具提示。唯一的问题是，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>

我现在做以下工作：

myKineticObject.on("mousemove", function() {
    tooltip.show();
});

myKineticObject.on("mouseout", function() {
    tooltip.hide();
}

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

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

谢谢

您似乎可以在配置中将“fixed”设置为true（不知道Opentip，只需快速查看文档）。由于目标为空，docs suggest fixed=true应使工具提示显示在鼠标位置，但在鼠标移动后不跟随它

这听起来怎么样？

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

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

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

});

我明天会试试这个，随时通知你。谢谢抱歉，目标false不起作用。查看我的答案，了解解决方案。无论如何谢谢你！我最近改进了这方面的文档。您应该使用

tooltip.setContent（）

来更新内容，而不仅仅是设置内容。至于工具提示的位置，

fixed:true

理论上应该可以工作并显示在光标位置。。。所以你可能发现了一个bug。我创建了一个项目，并将对此进行研究。

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

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

});