[SOLVED] Enabling jQueryUI tooltips for disabled fields and buttons

Enabling jQueryUI tooltips for disabled fields and buttons

I would like to have the jQueryUI tooltip work on disabled Buttons and Inputs as well. How can I make this happen?

Included is a sample showing various inputs and buttons, both enabled and disabled and how the jQueryUI tooltip seems to skip evaluation of the disabled elements.

Please click on the field/button labels to open the tooltips. My users don't like hover based tooltips on INPUTs and hover does not work on mobile.

If you hover over the disabled INPUT and BUTTON the browser tooltip will appear but not the jQueryUI version. This is obvious because the browser version does not evaluate the HTML but shows it raw.

Note: This question is NOT a duplicate of Show tooltip for disabled items, because that question does not ask about actual disabled tags (buttons or inputs)

// 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>

Solution

After not finding the answer I resolved the problem by looping through all disabled items with a [title] and processing them individually to move the tooltip to the label for that input element.

$("[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');
        }
    });
});