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

Question

I'm making a web application that uses Kinetic.js for some fancy graphical functions, and I want to show a tooltip with some information about each element when the users hovers over it.我正在制作一个 Web 应用程序，它使用 Kinetic.js 来实现一些花哨的图形功能，并且我想在用户将鼠标悬停在每个元素上时显示包含有关每个元素的一些信息的工具提示。

I've already figured out how to invoke a function on hover with 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
}

I've decided to use the seemingly nice Opentip to show the tooltip.我决定使用看似不错的Opentip来显示工具提示。 The only problem is that Kinetic.js doesn't create any usable DOM elements to use as a target for opentip.唯一的问题是 Kinetic.js 没有创建任何可用的 DOM 元素来用作 opentip 的目标。

This is (roughly) what my HTML looks like:这是（大致）我的 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>

Important to know is that these canvas elements all have the same width and height and stack on eachother.重要的是要知道这些画布元素都具有相同的宽度和高度并且彼此堆叠。 So they're unusable as targets.所以它们不能用作目标。

So instead of using a DOM element to use as the target for my tooltip, I need to manually show/hide and position the tooltip.因此，我需要手动显示/隐藏和定位工具提示，而不是使用 DOM 元素作为工具提示的目标。 I've figured out how to do the showing and hiding like this:我已经想出了如何像这样显示和隐藏：

    var tooltip = new Opentip(
        "div#container", //target element 
        "DummyContent", // will be replaced
        "My Title", // title
        {
            showOn: null, // I'll manually manage the showOn effect
        });

I now do the following:我现在执行以下操作：

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

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

The only problem is that it just shows up at the top left of the page, and I can't find anything in the docs on how to position this thing manually.唯一的问题是它只显示在页面的左上角，我在文档中找不到关于如何手动定位这个东西的任何内容。

Suggestions or ideas welcome.欢迎提出建议或想法。 I'm also open to using a different tooltip library, if necessary.如有必要，我也愿意使用不同的工具提示库。

Thanks!谢谢！

Answer 1

It appears (with no knowledge of Opentip, besides a quick look at the docs) that you can set 'fixed' to true in the config.看来（除了快速查看文档之外，不了解 Opentip）您可以在配置中将“fixed”设置为 true。 Since the target is null, the docs suggest fixed=true should make the tooltip appear at the mouse position, but not follow it once the mouse is moved around.由于目标为空，文档建议 fixed=true 应该使工具提示出现在鼠标位置，但一旦鼠标移动就不会跟随它。

How does that sound?听上去怎么样？

Answer 2

I managed to solve the problem like this, for those of you who are looking for a solution too:对于正在寻找解决方案的人，我设法解决了这样的问题：

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

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

});

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

问题描述

2 个解决方案

解决方案1
3 2012-11-09 17:14:52

解决方案2
0 已采纳 2012-11-13 14:56:29

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

问题描述

2 个解决方案

解决方案1 3 2012-11-09 17:14:52

解决方案2 0 已采纳 2012-11-13 14:56:29

解决方案1
3 2012-11-09 17:14:52

解决方案2
0 已采纳 2012-11-13 14:56:29