关于伪禁用元素的 jQuery UI 工具提示

Question

我想在具有ui-state-disabled 类的文本输入上显示tooltip。

我查看了tooltip source 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/

Answer 1

正如我在问题中所说，我需要在不添加容器或类似的东西的情况下让它工作。而且我愿意以某种方式扩展小部件......

所以我更仔细地阅读了源代码并在整个存储库中搜索ui-state-disabled，并发现在widget.js 中有一个_on() 方法，它在某些时候会对该类和一个名为的标志进行检查suppressDisabledCheck

代码中的注释说

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

这很重要，它给了我这个检查可以被覆盖的线索。所以在谷歌和the widget factory had the answer中快速搜索：

自动处理禁用的小部件：如果小部件被禁用或 该事件发生在具有 ui-state-disabled 类的元素上， 不调用事件处理程序。可以用 suppressDisabledCheck 参数。

所以基本上我是这样做的：

$.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"
        });
    }
});

然后像这样使用它：

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

Answer 2

查看文档 (http://api.jqueryui.com/tooltip/)：

通常，禁用的元素不会触发任何 DOM 事件。 因此，无法正确控制工具提示 禁用元素，因为我们需要监听事件以确定何时 显示和隐藏工具提示。结果，jQuery UI 不 保证对附加到禁用的工具提示的任何级别的支持 元素。不幸的是，这意味着如果您需要工具提示 禁用元素，您最终可能会混合使用原生工具提示 和 jQuery UI 工具提示。

包装解决方案

您的 HTML：

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

你的 Javascript

$(".input-container").each(function()
{
    $(this).tooltip({
        content: $(this).data("tooltip"),
        items: ".input-container"      
    });
});
// ... The rest is the same

使用假禁用属性的解决方案

在这里您可以使用readonly 属性和自定义类来禁用输入。

游乐场：https://jsfiddle.net/5gkx8qec/