Show current item as tool tip in ComboBox itemRollOver

Question

Hi, 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

Answer 1

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>