簡體   English   中英

打開新的工具提示時,關閉所有其他jQueryUI工具提示

[英]Close all other jQueryUI tooltips when a new tooltip is opened

用戶打開新工具提示時,如何關閉所有其他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工具提示小部件提供了管理可見性所需的內容。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM