How do I manually close jquery-ui tooltip set on table but tooltip created on td using items selector

I'm trying to manually close a tooltip. The tooltip is created on a table using the items option to select some td's. When the td is clicked, it should close the tooltip. This doesn't seem to work.

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

If I instead add the tooltips directly to the td's, then it works.

$(".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. Clicking on One in the fiddle doesn't close the tooltip, but clicking on Three does.

Having to add a tooltip to each td seems wrong, especially when the table approach works other than this manual close issue. Is that the route I must take?

Solution

In the click event, you need to use the close and the disable methods. The caveat is if you want them to be enabled for use later. Here is a way to do that.

Working example: 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");
  });

Making use of .hover() we can detect when the mouse has moved in and out and trigger the enable method. Technically, we do not need to take any action with the handlerIn function.