如何仅在单击鼠标时正确显示 JQuery 工具工具提示？

发布于 2024-12-05 06:02:51 字数 603 浏览 2 评论 0原文

每当用户单击菜单项时，我想显示工具提示：

// Initialize tooltips for each menu_item
$(".menu_item_tooltip_link a.tooltip").tooltip({
    opacity: 1.0,
    position: "bottom center",
    effect: "slide",
    direction: "bottom",
    offset: [0, 0],
    relative: true,
    events: { def: "click,mouseout", tooltip: "mouseenter" }
});

工具提示永远不应该被隐藏，除非用户单击工具提示的关闭按钮：

$(".menu_item_tooltip_close").click(function () {
    $(this).parents(".menu_item_tooltip:first").hide();
});

一切正常，但是当工具提示关闭并且光标停留在触发的元素中时工具提示只有在我离开项目的边界并再次单击它时才会显示。

知道如何解决这个问题吗？

原文

Whenever a user clicks a menu item I want to show a tooltip:

// Initialize tooltips for each menu_item
$(".menu_item_tooltip_link a.tooltip").tooltip({
    opacity: 1.0,
    position: "bottom center",
    effect: "slide",
    direction: "bottom",
    offset: [0, 0],
    relative: true,
    events: { def: "click,mouseout", tooltip: "mouseenter" }
});

The tooltip should never be hidden, unless the user clicks the tooltip's close button:

$(".menu_item_tooltip_close").click(function () {
    $(this).parents(".menu_item_tooltip:first").hide();
});

Everything is working fine, but when the tooltip is closed and the cursor stays in the element that triggered the tooltip it will not be shown until I leave the bounds of the item and click it again.

Any idea how to fix this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千と千尋 2024-12-12 06:02:51

我自己找到了解决方案。问题是使用 JQuery hide() 函数而不是 api hide() 函数。它的工作原理如下：

$(".menu_item_tooltip_close").click(function () {
    var element = $(this).parents(".menu_item_tooltip_link:first").find(
       "a.tooltip");
    var tip = element.data("tooltip");
    tip.hide();
});

I found the solution myself. The problem was using the JQuery hide() function instead of the api hide() function. Here is how it works:

$(".menu_item_tooltip_close").click(function () {
    var element = $(this).parents(".menu_item_tooltip_link:first").find(
       "a.tooltip");
    var tip = element.data("tooltip");
    tip.hide();
});

回复收藏 0 原文

~没有更多了~