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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

2 Responses to Creating a tool tip on a Flex TextInput control with password masked text

  1. Rafael says:

    As we know credit card has always security issues. To prevent show the number you can also just show the last 4 digits.