gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 20:03:11 37 4
gpt4 key购买 nike

我正在制作一个使用 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>

重要的是要知道这些 Canvas 元素都具有相同的宽度和高度并且彼此堆叠。所以它们不能用作目标。

因此,我需要将 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();
}

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

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

谢谢!

最佳答案

看来(除了快速查看文档外,不了解 Opentip)您可以在配置中将“fixed”设置为 true。由于目标为空,文档建议 fixed=true 应该使工具提示出现在鼠标位置,但一旦鼠标四处移动则不会跟随它。

听起来怎么样?

关于javascript - 结合 Kinetic.js 手动定位 opentip 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13309622/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com