打开新工具提示时关闭所有其他 jQueryUI 工具提示答案

【问题标题】：Close all other jQueryUI tooltips when a new tooltip is opened打开新工具提示时关闭所有其他 jQueryUI 工具提示
【发布时间】：2019-07-23 18:55:34
【问题描述】：

当用户打开新的工具提示时，如何关闭所有其他 jQueryUI 工具提示。我想避免使用开放的工具提示乱扔 UI。

我不想弄乱我认为是一个简单的问题，但我的工具提示经过自定义，仅在用户单击帮助图标或字段名称时显示，如下例所示。此外，与示例中一样，帮助触发器不在与该输入关联的 [label] 标记中，因此工具提示不能依靠字段焦点。我怀疑这是问题所在。

function loadCSS(filename) {

  var file = document.createElement("link");
  file.setAttribute("rel", "stylesheet");
  file.setAttribute("type", "text/css");
  file.setAttribute("href", filename);
  document.head.appendChild(file);

}

loadCSS("https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css");


// Disable HOVER tooltips for input elements since they are just annoying.
$("input[title]").tooltip({
  disabled: true,
  content: function() {
    // Allows the tooltip text to be treated as raw HTML.
    return $(this).prop('title');
  },
  close: function(event, ui) {
    // Disable the Tooltip once closed to ensure it can only open via click.
    $(this).tooltip('disable');
  }
});


/* Manually Open the Tooltips */
$(".ui-field-help").click(function(e) {
  var forId = e.target.getAttribute('for');
  if (forId) {
    var $forEl = $("#" + forId);
    if ($forEl.length)
      $forEl.tooltip('enable').tooltip('open');
  }
});

.ui-field-help {
  text-decoration: underline;
}

input {
  width: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<table width=100%>
  <tr>
    <td for="A000" class="ui-field-help">First</td>
    <td><input type="Text" id="A000" title="title @A000"></td>
  </tr>
  <tr>
    <td for="B000" class="ui-field-help">Second</td>
    <td><input type="Text" id="B000" title="title @B000"></td>
  </tr>
  <tr>
    <td for="C000" class="ui-field-help">Third</td>
    <td><input type="Text" id="C000" title="title @C000"></td>
  </tr>
  <tr>
    <td for="D000" class="ui-field-help">Fourth</td>
    <td><input type="Text" id="D000" title="title @D000"></td>
  </tr>
  <tr>
    <td for="E000" class="ui-field-help">Fifth</td>
    <td><input type="Text" id="E000" title="title @E000"></td>
  </tr>
</table>

【问题讨论】：

正常行为是在不再“超过”工具提示时关闭。 jqueryui.com/tooltip 所以我猜在没有看到你的代码的情况下，我无法理解为什么在这种情况下你需要“关闭”一个工具提示。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example
@Twisty，添加了代码示例以重现并意识到jQueryUI工具提示依赖于焦点退出来关闭工具提示。我打破了这一点，因为我从该字段之外的帮助链接手动打开工具提示，该链接永远不会触发焦点。
好的，我明白了。因此，您可以以相同的方式手动触发关闭。您希望什么事件触发关闭？
@Twisty，这是个好问题。我最初的答案应该是下一个工具提示的 OnOpen，但我正在考虑重新设计 UI，以便工具提示代码能够按设计工作，而不必破解它，现在我明白了问题是什么......
@Twisty，感谢您的帮助。但我想这是一个永远不会得到答案的问题......

标签： jquery-ui jquery-ui-tooltip

【解决方案1】：

我的要求是不必要的。如果使用正确，jQueryUI 工具提示将根据焦点/悬停事件自动关闭。

如果工具提示在没有触发这些事件的情况下打开，那么它就无法自动关闭。

我有意通过单击单独的帮助图标来打开工具提示。那个点击没有触发焦点。通过修复我的代码以将图标移动到与 INPUT 绑定的 LABEL (for=) 中，它导致 INPUT 接收焦点，然后为 jQueryUI 工具提示小部件提供管理可见性所需的内容。

【讨论】：