[英]Close all other jQueryUI tooltips when a new tooltip is opened
How can I close all other jQueryUI tooltips when a user opens a new tooltip. 用户打开新工具提示时,如何关闭所有其他jQueryUI工具提示。 I want to avoid littering the UI with open tooltips.
我想避免使用开放的工具提示乱扔UI。
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.
此外,如示例中所示,帮助触发器不在与该输入关联的[label]标记中,因此工具提示无法依靠字段焦点。 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>
What I was asking for was unnecessary. 我要的是不必要的。 If used correctly jQueryUI tooltips will automatically close themselves based on the focus/hover events.
如果使用正确,jQueryUI工具提示将根据焦点/悬停事件自动关闭自身。
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.
通过修复代码将图标移到与INPUT关联的LABEL(for =)中,代码使INPUT获得了焦点,然后为jQueryUI工具提示小部件提供了管理可见性所需的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.