2

我正在制作一个将 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 没有创建任何可用的 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();
}

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

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

谢谢！

4

2 回答 2

3

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

听上去怎么样？

于 2012-11-09T17:14:52.593 回答
0

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

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

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

});
于 2012-11-13T14:56:29.607 回答