Как вручную закрыть jQuery-ui tooltip, установленный на таблице, но всплывающая подсказка, созданная на td с помощью элементов selecter

Question

Я пытаюсь вручную закрыть всплывающую подсказку. Всплывающая подсказка создается в таблице с помощью параметра items для выбора некоторых td. Когда td щелкнут, он должен закрыть всплывающую подсказку. Кажется, это не работает.

<table id="thingtable"> 
    <tr><td class="thing one">One</td></tr> 
    <tr><td class="thing">Two</td></tr> 
</table> 

$("#thingtable").tooltip({ 
    items: ".thing", 
    content: "Thing" 
}); 

$(".one").click(function (e) { 
    $("#thingtable").tooltip("close"); 
}); 

Если я вместо этого добавляю всплывающие подсказки непосредственно к td, то он работает.

$(".thing").each(function (index) { 
    $(this).tooltip({ 
    items: ".thing", 
    content: "Thing" 
    }); 
}); 

$(".one").click(function (e) { 
    var td = $(e.target); 
    td.tooltip("close"); 
}); 

Here is a fiddle. щелчок на одном в скрипке не закрывает всплывающую подсказку, но при нажатии на три делает.

Необходимо добавить всплывающую подсказку для каждого тд, если это неправильно, особенно когда подход к таблице работает иначе, чем эта проблема с закрытием. Это маршрут, который я должен взять?

Answer 1

В событии click вам необходимо использовать методы close и disable. Предостережение это, если вы хотите, чтобы они были включены для использования позже. Вот как это сделать.

Рабочий пример: https://jsfiddle.net/Twisty/hn4tqzrL/2/

JavaScript

$(".one").click(function() { 
    console.log("Thing One clicked."); 
    $("#thingtable").tooltip("close").tooltip("disable"); 
    }).hover(function() { 
    $("#thingtable").tooltip("enable"); 
    }, function() { 
    $("#thingtable").tooltip("enable"); 
    }); 

Используя .hover() мы можем определить, когда мышь перемещается в и и вызвать метод enable. Технически нам не нужно предпринимать никаких действий с помощью функции handlerIn.