Show current item as tool tip in ComboBox itemRollOver

I need to know how to show current item as tool tip in ComboBox itemRollOver event at present i am using the below code,

private var tip:ToolTip
private function ItemRollOver(event:ListEvent):void
{           
    var currComboBox:ComboBox = event.currentTarget as ComboBox;
    var tipInfo:String = currComboBox.dataProvider[event.rowIndex].label;
    tip = ToolTipManager.createToolTip(tipInfo,this.mouseX,this.mouseY) as ToolTip;
}

private function ItemRollOut(event:Event):void
{           
    ToolTipManager.destroyToolTip(tip);             
}


<mx:ComboBox id="cbLblStyle" fontFamily="Arial" dataProvider="{styleCollection}" 
    selectedItem="{labels.styleName}"  itemRollOver="ItemRollOver(event)"  
    itemRollOut="ItemRollOut(event)" click开发者_如何学运维="ItemRollOut1(event)" 
    close="cbLblStyle_changeEvt(event)" fontSize="12" x="12" y="240" 
    width="188"/>

but this has some problem, when i click the item or itemRollOver faster tool tip is not destroyed some time.

Is there any other way to do this?

Thanks in advance

Use a custom itemRenderer:

<mx:ComboBox>
    <mx:dataProvider>
        <mx:Array>
            <mx:String>ASD</mx:String>
            <mx:String>QWE</mx:String>
            <mx:String>ZXC</mx:String>
            <mx:String>123</mx:String>
        </mx:Array>
    </mx:dataProvider>
    <mx:itemRenderer>
        <mx:Component>
            <mx:TextInput text="{data}" toolTip="{data}"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>

Item renderers:

<!-- write this in CustomRenderer.mxml -->
<mx:VBox backgroundColor="#ffff00">
  <mx:Label text="This is my custom renderer"/>
  <mx:TextInput text="{data}" toolTip="{data}"/>
</mx:VBox>

<!---
/**
* now you can use `CustomRenderer` as item renderer in any class 
* using the following syntax:
* */
//your main application class
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  backgroundColor="#ff0000">
  <mx:ComboBox id="cb1" itemRenderer="CustomRenderer" dataProvider="{dp1}"/>
  <mx:ComboBox id="cb2" itemRenderer="CustomRenderer" dataProvider="{dp2}"/>
  <mx:ComboBox id="cb3" itemRenderer="CustomRenderer" dataProvider="{dp3}"/>
  <mx:Script>
    <![CDATA[
      private var dp1:ArrayCollection = new ArrayCollection(["asd", "fgh", "lkj"]);
      private var dp2:ArrayCollection = new ArrayCollection(["qwe", "rty", "poi"]);
      private var dp3:ArrayCollection = new ArrayCollection(["123", "456", "789"]);
    ]]>
  </mx:Script>
</mx:Application>

Actually the Answer 1 will work perfectly BUT the tooltip will be appeared ONLY IF there is the TEXT of the combobox's item under the mouse pointer. Means if the mouse pointer is whatever hovering the item of the combobox but if that item's text is not under the mouse pointer then the tooltip would not be displayed.

So we will have to define some functions on itemRollOver, itemRollOut, focusOut etc.. to display/remove the custom tooltip (like vbox etc using as popup for tooltip).

Simplest way to show tooltips in a dropdown menu ONLY for rows with truncated strings:

<mx:ComboBox>
    <mx:itemRenderer>
        <mx:Component>
            <mx:Label truncateToFit="true"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:ComboBox>