如何使用 dojo 在禁用按钮上显示工具提示并在启用按钮上隐藏工具提示答案

【问题标题】：How to show tooltip on disabled button and hide tooltip on enabled button using dojo如何使用 dojo 在禁用按钮上显示工具提示并在启用按钮上隐藏工具提示
【发布时间】：2014-07-29 16:46:57
【问题描述】：

需要使用 dojo 在禁用按钮上显示工具提示并在启用按钮上隐藏工具提示。

我有一个复选框和一个按钮。在选中复选框时我需要启用按钮，在取消选中时我想禁用按钮并希望提示说明按钮被禁用的原因。

在禁用按钮的一般情况下，工具提示不会出现。

我从以下链接获得了一个代码，可以在禁用按钮上显示工具提示 displaying dojo tooltip on a disabled validation text box

但我希望在启用按钮时隐藏工具提示。请提供解决方案

【问题讨论】：

标签： dojo tooltip

【解决方案1】：

我已修改链接displaying dojo tooltip on a disabled validation text box 中的示例以满足您的需要。

html
<span id="abcd">
 <input type="button" disabled="true" dojoType="dijit.form.Button" id="button1" label="MyButton" />
 </span>
<div dojoType="dijit.Tooltip" connectId="button1" jsId="tt1" label = "Why the button is disabled?" ></div>

js部分

<script>
    dojo.require("dijit.form.Button");
    dojo.require("dijit.Tooltip");
    dojo.require("dijit.TooltipDialog");
    dojo.require("dojox.fx");

    var dialog;

    dojo.addOnLoad(function() {

        dojo.connect(dijit.byId('button1').domNode,'mouseenter', function(){
            console.log("HI");
            // Modified code ***START***
            var button = dijit.byId('button1');
            var disabled = button.get("disabled");
            if (disabled){ // disabled == true
                tt1.open(this);
            };
            // Modified code ***END***

        })

        dojo.connect(dojo.byId('abcd'),'mouseleave', function(e){
            tt1.close();
            console.log("HI2")
        })


        tt1.addTarget(dojo.query('input', dijit.byId('someId11').domNode));
    });
</script>

【讨论】：