Close all other jQueryUI tooltips when a new tooltip is opened

Question

How can I close all other jQueryUI tooltips when a user opens a new tooltip. I want to avoid littering the UI with open tooltips.

I did not want to clutter up what I thought was a straightforward question but my tooltips are customized to only show when a user has clicked on a help icon or field name as in the example below. In addition as in the example, the help triggers are not in the [label] tag associated to that input and so the tooltip can't count on the field focus. I suspect that is the issue.

 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> 

Answer 1

What I was asking for was unnecessary. If used correctly jQueryUI tooltips will automatically close themselves based on the focus/hover events.

If the tooltip is opened without triggering these events then there won't be any way for it to automatically close itself.

I had intentionally opened the tooltips via a click on a separate help icon. That click did not trigger the focus. By fixing my code to move the icon into the LABEL (for=) tied to the INPUT, it resulted in the INPUT receiving the focus which then gave the jQueryUI tooltip widget what it needed to manage the visibility.