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

Question

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

我看了一眼 tooltip source code，但找不到可以检查那个特定 class 的内容。所以不知道为什么不显示

据我所知，这些元素本身并没有被禁用，它们只是应用了 class。

那么，如何在具有 class 的元素上显示工具提示？我不想使用包装器或类似的东西。也许通过小部件工厂扩展...

这是示例代码

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

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

In general, disabled elements do not trigger any DOM events. Therefore, it is not possible to properly control tooltips for disabled elements, since we need to listen to events to determine when to show and hide the tooltip. As a result, jQuery UI does not guarantee any level of support for tooltips attached to disabled elements. Unfortunately, this means that if you require tooltips on disabled elements, you may end up with a mixture of native tooltips and jQuery UI tooltips.

带包装器的解决方案

你的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 属性和自定义 class 禁用输入。

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

Answer 2

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

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

的标志

代码中的注释说

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

这非常重要，它给了我这个检查可以被覆盖的线索。所以在 google 和 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.

基本上我是这样做的：

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

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

jQuery UI tooltip on pseudo disabled elements

jquery-ui

jquery-ui-tooltip

带包装器的解决方案

假禁用的解决方案-属性