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

【问题标题】：How do I correctly show a JQuery Tool tooltip only on mouse click?如何仅在鼠标单击时正确显示 JQuery Tool 工具提示？
【发布时间】：2011-09-17 14:49:40
【问题描述】：

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

// 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();
});

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

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

【问题讨论】：

。 . . .请问html？杰宾？ jsfiddle？
您不想在用户悬停时显示工具提示吗？当您单击一个菜单项时，您希望它触发该菜单项执行的功能。

标签： javascript jquery tooltip jquery-tools

【解决方案1】：

我自己找到了解决方案。问题是使用 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();
});

【讨论】：