jquery-ui - 打开新工具提示时关闭所有其他 jQueryUI 工具提示
问题描述
当用户打开新的工具提示时,如何关闭所有其他 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 工具提示将根据焦点/悬停事件自动关闭。
如果工具提示在没有触发这些事件的情况下打开,那么它就无法自动关闭。
我有意通过单击单独的帮助图标来打开工具提示。那个点击没有触发焦点。通过修复我的代码以将图标移动到与 INPUT 绑定的 LABEL (for=) 中,它导致 INPUT 接收焦点,然后为 jQueryUI 工具提示小部件提供管理可见性所需的内容。
推荐阅读
- android - (已解决)Android Studio:底部导航视图未在我的菜单中显示项目,稍后添加
- javascript - 如何将 UIWebView 中的 JSContext 重新用于 WKWebview 的 WKScriptMessage
- javascript - How to a count a specific digit in a number with javascript
- java - Quartz 是否支持在多个节点上执行一次?
- c++ - 阅读使用 C++ 以 little endian 编写的 Oracle BLOB
- python - 在从传感器读取而不打印从传感器读取的数据时,循环不能立即工作?
- java - 如何使日志仅在文件上打印而不在控制台上打印?
- keycloak - Keycloak 失败,因为它找不到我的主题或带有 NullPointer 异常的默认主题
- ngrx - 如何为 ngrx/data 编写选择器?
- python - 在 OpenWrt Linux 的单独分区上,在启动/重启时运行 Python 程序