<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html" backgroundGradientColors="[#ffffff, #ffffff]">
<mx:Script>
    <![CDATA[
        import mx.events.ToolTipEvent;
        import mx.collections.ArrayCollection;
        private function init():void{
            //always have an init()
            //it's good practice, and you usually need one
            acData = new ArrayCollection(aData);
        }
        [Bindable]
        private var acData:ArrayCollection;
        
        private var aData:Array = [ {productName:"test",productID:"1234567891",imageName:'testImage.jpg'},
                                    {productName:"test long desc",productID:"1234467891",imageName:'testImage.jpg'},
                                    {productName:"test even longer desc",productID:"1234467881",imageName:'testImage.jpg'},
                                    {productName:"test even way longer desc",productID:"1235467891",imageName:'testImage.jpg'}
                                    ];
        
        // when you use the dataTipFunction method, it automatically passes
        // that current item into the function as often referred to as "item"
        // now you can extract the fields you would like to show in your dataTip
        private function justIDDataTip(item:Object):String{
            var tempString:String = item.productID;
            return tempString;
        }
        private function nameAndIDDataTip(item:Object):String{
            var tempString:String = 'ID: ' + item.productID + '\n' + 'Name: ' + item.productName;
            return tempString;
        }
        
        [Bindable]
        private var myToolTipText:String = "<b>This is a bold toolTip</b>" + 
                    "<img src=\"http://mkruger.cfwebtools.com/images/cfwt_tiny.jpg\"> ";
        
    ]]>
</mx:Script>
    <mx:Style source="style.css"/>
    <mx:VBox>
        <mx:HBox>
            <mx:DataGrid x="26" y="10" dataProvider="{acData}"/>
            <mx:Text x="342" y="11" text="Plain datagrid, no modification, or even column declarations" width="226"/>
        </mx:HBox>
        <mx:HBox>
            <mx:DataGrid id="justID" x="26" y="174" dataProvider="{acData}" dataTipFunction="justIDDataTip">
                <mx:columns>
                    <mx:DataGridColumn visible="false" headerText="ID" dataField="productID"/>
                    <mx:DataGridColumn showDataTips="true" headerText="Product Name" dataField="productName"/>
                </mx:columns>
            </mx:DataGrid>
            <mx:Text x="136" y="175" text="This just shows the ID in the Data tip, hover over the data to see it." width="216"/>
        </mx:HBox>
        <mx:HBox>
            <mx:DataGrid id="nameAndID" dataProvider="{acData}" dataTipFunction="nameAndIDDataTip" x="26" y="324">
                <mx:columns>
                    <mx:DataGridColumn visible="false" headerText="ID" dataField="productID"/>
                    <mx:DataGridColumn showDataTips="true" headerText="Product Name" dataField="productName"/>
                </mx:columns>
            </mx:DataGrid>
            <mx:Text x="136" y="325" text="This shows the ID and the product name, it for the hard to fit areas, where you just don't have the room." width="226"/>
            <mx:HBox>
                <mx:DataGrid id="nameAndIDItemRenderer" dataProvider="{acData}" dataTipFunction="nameAndIDDataTip" x="26" y="324" variableRowHeight="true">
                    <mx:columns>
                        <mx:DataGridColumn visible="false" headerText="ID" dataField="productID"/>
                        <mx:DataGridColumn showDataTips="true" headerText="Product Name" dataField="productName"/>
                        <mx:DataGridColumn headerText="Image" dataField="imageName" width="120">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:HBox horizontalAlign="center">
                                        <mx:Image source="{data.imageName}" toolTip="{data.productName}"/>
                                    </mx:HBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                    </mx:columns>
                </mx:DataGrid>
                <mx:Text x="136" y="325" text="how to use the itemRenderer and the tooltip" width="226"/>
            </mx:HBox>
        </mx:HBox>
        
    </mx:VBox>
    <mx:Text x="489" y="256" text="Right click to view source" width="226"/>
    <mx:Button label="hover to get tooltip" toolTip="{myToolTipText}" x="499" y="83"/>
</mx:Application>