Flex Examples

The following example shows you how you can use a tool tip on a Flex TextInput control with its displayAsPassword property set to true. By mousing over the credit card number field in the form below, you can see your credit card number in a readable tool tip.

Want the short version? Use a simple binding to bind the tool tip text to the TextInput control’s text, as seen in the following snippet:

<mx:TextInput id="ccNumber"
        text="4111111111111111"
        displayAsPassword="true"
        toolTip="{ccNumber.text}" />

Looking for a longer version? Read on!

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/28/creating-a-tool-tip-on-a-flex-textinput-control-with-password-masked-text/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.formatters.DateBase;
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="Name:">
            <mx:TextInput id="ccName"
                    text="JOHN DOE" />
        </mx:FormItem>
        <mx:FormItem label="Number:">
            <mx:TextInput id="ccNumber"
                    text="4111111111111111"
                    displayAsPassword="true"
                    toolTip="{ccNumber.text}" />
        </mx:FormItem>
        <mx:FormItem label="Type:">
            <mx:ComboBox id="ccType"
                    dataProvider="[American Express,MasterCard,Visa]" />
        </mx:FormItem>
        <mx:FormItem label="Expiration:" direction="horizontal">
            <mx:ComboBox id="ccExpMM"
                    initialize="ccExpMM.dataProvider = DateBase.monthNamesShort;" />
            <mx:ComboBox id="ccExpYYYY"
                    dataProvider="[2008,2009,2010]" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.