<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/creating-data-tips-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_toolTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:List id="list"
            labelField="label"
            itemRenderer="skins.CustomItemRendererWithDataTip"
            width="100" height="112"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" index="0" />
                <fx:Object label="Two" index="1" />
                <fx:Object label="Three" index="2" />
                <fx:Object label="Four" index="3" />
                <fx:Object label="Five" index="4" />
                <fx:Object label="Six" index="5" />
                <fx:Object label="Seven" index="6" />
                <fx:Object label="Eight" index="7" />
                <fx:Object label="Nine" index="8" />
                <fx:Object label="Ten" index="9" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/creating-data-tips-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRendererWithDataTip"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false"
        toolTip="{data.index + ') ' + data.label}">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.normalAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.normalAndShowsCaret>
        <s:stroke.hoveredAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.hoveredAndShowsCaret>
        <s:stroke.selectedAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.selectedAndShowsCaret>
        <s:fill>
            <s:SolidColor color.normal="{contentBackgroundColor}"
                    color.normalAndShowsCaret="{contentBackgroundColor}"
                    color.hovered="{rollOverColor}"	
                    color.hoveredAndShowsCaret="{rollOverColor}"
                    color.selected="{selectionColor}"
                    color.selectedAndShowsCaret="{selectionColor}" />
        </s:fill>
    </s:Rect>
    <s:SimpleText id="labelDisplay"
            left="3" right="3" top="6" bottom="4"
            verticalCenter="0" />
 
</s:ItemRenderer>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/creating-data-tips-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_toolTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import skins.CustomItemRendererWithDataTip;
            import spark.components.List;
 
            protected var list:List;
 
            protected function init():void {
                var dp:ArrayList = new ArrayList();
                dp.addItem({label:"One", index:0});
                dp.addItem({label:"Two", index:1});
                dp.addItem({label:"Three", index:2});
                dp.addItem({label:"Four", index:3});
                dp.addItem({label:"Five", index:4});
                dp.addItem({label:"Six", index:5});
                dp.addItem({label:"Seven", index:6});
                dp.addItem({label:"Eight", index:7});
                dp.addItem({label:"Nine", index:8});
                dp.addItem({label:"Ten", index:9});
 
                list = new List();
                list.dataProvider = dp;
                list.labelField = "label";
                list.itemRenderer = new ClassFactory(CustomItemRendererWithDataTip);
                list.width = 100;
                list.height = 112;
                list.horizontalCenter = 0;
                list.verticalCenter = 0;
                addElement(list);
            }
        ]]>
    </fx:Script>
 
</s:Application>