Question

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?

Answer 1

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