how to show a tooltip on a disabled control?

Question

I'm displaying a list of buttons, some of which might be disabled. I need to show a tooltip on the disabled buttons with an explanation of why it's disabled, but it seems I can't disable the button without disabling the tooltip. Is there a simple way around this?

Answer 1

One way to do this is to override the enabled getter and setter to do what you want. So in my case, I still wanted most mouse events to fire, just not the click event.

<?xml version="1.0" encoding="utf-8"?>
<s:Button buttonMode="true" click="handleClick(event)" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
            public var data:Object;
            private var _enabled:Boolean = true;

            public override function get enabled():Boolean
            {
                return _enabled;
            }

            public override function set enabled(value:Boolean):void
            {
                _enabled = value;
                invalidateDisplayList();
                dispatchEvent(new Event("enabledChanged"));
                invalidateSkinState();
            }

            protected function handleClick(event:MouseEvent):void
            {
                if (!_enabled)
                {
                    event.stopPropagation();
                }
            }
        ]]>
    </fx:Script>
</s:Button>

Since mouse events now fire, the tooltips work again.

Answer 2

The best choice for me was to put a void label around and in front of the element. Then, if necessary, I set the element to disable and the tooltip works in the label. If not, I put sent the label to back. It works pretty well.

if (new MainListsAdmin(this.mainApp).temInvestimentoComAqueleTipo(t)) {
            deletarGroupInto.setTooltip(new Tooltip("Há investimentos vinculados a Tipo de Investimento.\nDeleção bloqueada."));
            this.deletarButton.setDisable(true);
}else{
        deletarGroupInto.toBack();
}

Answer 3

Wrap the Button in a Group, and apply the toolTip to the group instead.

<s:Group toolTip="My toolTip">
    <s:Button enabled="false"/>
</s:Group>

It's a bit ugly, but it works.

Answer 4

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import mx.managers.ToolTipManager;
        import mx.controls.ToolTip;
        private var tooltip:ToolTip;
        private var p:Point;

        private function whyDisable():void
        {

            //calculate the button position , so that roll over shows the tooltip 
            p=new Point();
            p=localToGlobal(new Point(btn.x,btn.y));
            if(btn.enabled==false)
                tooltip = ToolTipManager.createToolTip('Button is disabled',p.x+(btn.width/2),p.y-20,'errorTipAbove') as ToolTip;
            else
                tooltip=ToolTipManager.createToolTip('Button is enabled',p.x+(btn.width/2),p.y-20,'errorTipAbove') as ToolTip;
        }
        ]]>
    </mx:Script>
    <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
        <mx:Button id="btn" label="Show Tooltip" buttonDown="trace('ankur')" autoRepeat="true" enabled="true" rollOver="whyDisable();" rollOut="{ToolTipManager.destroyToolTip(tooltip);}"/>
    </mx:VBox>
</mx:Application>

Hi, this application works on the disabled button,I used ToolTipManager to do this,

i hope this works for you

have a gr8 time

Ankur Sharma

Answer 5

You will need to use the ToolTipManager class to create and destroy the tool tips manually.

This article should give you all the info you need to accomplish this:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html