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

时间:2014-06-09 07:08:55

标签: dojo tooltip

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

我有一个复选框和一个按钮。 在选中复选框时我需要启用该按钮,在取消选中时我想要禁用该按钮并想要一个tootip来说明该按钮被禁用的原因。

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

我有一个代码,可以从下面的链接显示禁用按钮上的工具提示 displaying dojo tooltip on a disabled validation text box

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

1 个答案:

答案 0 :(得分:0)

我修改了链接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 part

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