jQuery UI tooltip on pseudo disabled elements

I would like to show a tooltip on a text input that has a ui-state-disabled class.

I took a peek to the tooltip source code and I couldn't find something that checks against that particular class. So I don't know why it won't show.

As far as I can tell, the elements aren't disabled per se, they just have a class applied to them.

So, how can I show a tooltip on elements that have that class? I don't want to use a wrapper or anything like that. Maybe extending through widget factory...

Here's a sample code

HTML

<input name="#1" class="text" data-tooltip="message A">
<input name="#2" class="text" data-tooltip="message B">
<br>
<button id="disable">disable input #2</button>
<button id="enable">enable input #2</button>

JS

$(".text").each(function()
{
    $(this).tooltip({
        content: $(this).data("tooltip"),
        items: ".text"      
    });
});

$("#disable").click(function()
{
    $("input[name='#2']").addClass("ui-state-disabled");
});

$("#enable").click(function()
{
    $("input[name='#2']").removeClass("ui-state-disabled");
});    

FIDDLE: https://jsfiddle.net/hn1o4qs2/

As I've stated in my question, I needed to get this working without adding a container or anything like that. And I was willing to extend the widget somehow...

So I read the source code more carefully and searched throught the whole repository for ui-state-disabled, and found that in widget.js there is an _on() method that at some point performs a check against that class and a flag called suppressDisabledCheck

A comment in code says

// Allow widgets to customize the disabled handling
// - disabled as an array instead of boolean
// - disabled class as method for disabling individual parts

This was very important, it gave me the clue that this check could be overriden. So a quick search in google and the widget factory had the answer:

Automatically handles disabled widgets: If the widget is disabled or the event occurs on an element with the ui-state-disabled class, the event handler is not invoked. Can be overridden with the suppressDisabledCheck parameter.

So basically I did this:

$.widget("ui.tooltip", $.ui.tooltip,
{
    options: {
        allowOnDisabled: false
    },
    _on: function()
    {
        var instance = this;

        this._super(instance.options.allowOnDisabled, {
            mouseover: "open",
            focusin: "open",
            mouseleave: "close",
            focusout: "close"
        });
    }
});

And then used it like this:

$(".text").each(function()
{
    $(this).tooltip({
        allowOnDisabled: true,
        content: $(this).data("tooltip"),
        items: ".text"      
    });
});

EDIT 2022-09-15

I was having some trouble with this implementation, so I've changed it a little bit

$.widget("ui.tooltip", $.ui.tooltip,
{
    options: {
        allowOnDisabled: false
    },
    _create: function()
    {
        this._super();

        var instance = this;

        this._on(instance.options.allowOnDisabled, {
            mouseover: "open",
            focusin: "open",
            mouseleave: "close",
            focusout: "close"
        });
    }
});