如何在火花列表上显示工具提示

Question

I have a Spark List and I want to show a tool tip when over a row. In the previous List I think there was a dataTipField property but I don't see that on the Spark List.

Answer 1

If the label displayed in the list is different than the toolTip you want to show then you can use toolTip property of the Label in Sumit's answer as below:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    private var myDataProvider:ArrayCollection = new ArrayCollection([
        {data:1, label:"One", desc:"Here is a toolTip description of the item One"},
        {data:2, label:"Two", desc:"Here is a toolTip description of the item Two"},
        {data:3, label:"Three", desc:"Here is a toolTip description of the item Three"},
        {data:4, label:"Four", desc:"Here is a toolTip description of the item Four"},
        {data:5, label:"Five", desc:"Here is a toolTip description of the item Five"}
    ]);
    ]]></fx:Script>
    <s:List dataProvider="{myDataProvider}">
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <fx:Script><![CDATA[
                        override public function set data(value:Object):void
                        {
                            super.data = value;
                        }
                        [Bindable]
                        private function getToolTip():String
                        {
                            return data.desc;
                        }
                        ]]></fx:Script>
                    <s:Label text="{data.label}" toolTip="{getToolTip()}" width="100%"/>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>

Answer 2

If you want to show the tooltip when the data width is more than the List width then you can use inline itemrenderer for it.

<s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:Label text="{data.Expense}"
                         width="100"
                         maxDisplayedLines="1"
                         showTruncationTip="true" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>