CODEWITHSUNDEEP
apache-flexflex4flex4.6
1.21 gigawatts
1.21 gigawatts

Reputation: 17716

How to show a tooltip on a Spark List

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.

Upvotes: 0

Views: 248

Answers (2)

gbdcool
gbdcool

Reputation: 982

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>

enter image description here

Upvotes: 1

Sumit
Sumit

Reputation: 729

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>

Upvotes: 0

Related Questions