为禁用的字段和按钮启用 jQueryUI 工具提示

Question

我希望 jQueryUI 工具提示也适用于禁用的按钮和输入。我怎样才能做到这一点？

包含的示例显示了各种输入和按钮，包括启用和禁用以及 jQueryUI 工具提示如何跳过对禁用元素的评估。

请单击 field/button 标签打开工具提示。我的用户不喜欢 INPUT 上基于悬停的工具提示，并且悬停在移动设备上不起作用。

如果将鼠标悬停在禁用的 INPUT 和 BUTTON 上，将显示浏览器工具提示，但不会显示 jQueryUI 版本。这是显而易见的，因为浏览器版本不会评估 HTML 而是显示它。

注意：此问题与 Show tooltip for disabled items 不重复，因为该问题不询问实际禁用的标签（按钮或输入）

// 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');
  }
});

// Basic tooltips for the Buttons only but format HTML.
$("button[title]").tooltip({
  content: function() {
    // Allows the tooltip text to be treated as raw HTML.
    return $(this).prop('title');
  }
});


/* 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');
  }
});

// The following is only to load the CSS....
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");

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

<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><label for="A000" class="ui-field-help">Enabled Input</label></td>
    <td><input type="Text" id="A000" title="title @A000<hr>Fancy <i>HTML</i>..."></td>
  </tr>
  <tr>
    <td><label for="B000" class="ui-field-help">Disabled Input</label></td>
    <td><input disabled=disabled type="Text" id="B000" title="title @B000<hr>Fancy <i>HTML</i>..."></td>
  </tr>
  <tr>
    <td><label for="E000" class="ui-field-help">Enabled Button</label></td>
    <td><button id="E000" title="title @E000<hr>Fancy <i>HTML</i>...">Enabled Button</button></td>
  </tr>
  <tr>
    <td><label for="D000" class="ui-field-help">Disabled Button</label></td>
    <td><button disabled=disabled type="Text" id="D000" title="title @D000<hr>Fancy <i>HTML</i>...">Disabled Button</button></td>
  </tr>
</table>

Answer 1

在找不到答案后，我通过循环遍历所有带有 [title] 的禁用项目并单独处理它们以将工具提示移动到该输入元素的标签来解决问题。

$("[title]:disabled", $container).each(function (ix, el) {
    // Since the jQueryUI tooltips don't work on disabled controls we remove them 
    // and then attempt to add them to the elements label.
    var title = el.title;
    el.title = ''; // Clear the title to avoid the browser tooltip

    // Look for a Label attached to the element and add the tooltip there.
    $('label[for=' + el.id + ']').attr('title', title).tooltip({
        content: function () {
            // Allows the tooltip text to be treated as raw HTML.
            return $(this).prop('title');
        }
    });
});

为禁用的字段和按钮启用 jQueryUI 工具提示

Enabling jQueryUI tooltips for disabled fields and buttons

jquery-ui

jquery-ui-tooltip