flex3] custom tooltip

사용자정의 툴팁

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
 <![CDATA[
  import mx.events.ToolTipEvent;
  import mx.events.ListEvent;
  import mx.collections.IList;
  import mx.controls.Alert;
  import mx.managers.DragManager;
  import mx.events.DragEvent;
  
  [Bindable]
  [Embed(source='asserts/17.gif')]
  private var m1:Class;
  
  [Bindable][Embed(source="asserts/18.gif")]
  private var m2:Class;
  
  [Bindable][Embed(source="asserts/19.gif")]
  private var m3:Class;
  
  private var mTipString:String;
  
   private function fnRollOut(event:ListEvent):void
  {
   mTipString = "";
   event.target.toolTip = mTipString;
   event.target.removeEventListener(ToolTipEvent.TOOL_TIP_CREATE,createCustomTip);
  }
  
  
    private function fnRollOver(event:ListEvent):void {
             event.target.addEventListener(ToolTipEvent.TOOL_TIP_CREATE,createCustomTip);
                 // 사용자 정의형 툴팁을 적용하기 위한 장치

             mTipString = event.itemRenderer.data.toolStr;      // 툴팁 문구를 변수에 저장한다.(item정보 얻어냄)
             event.target.toolTip = mTipString ;
            }
  
  
 
  
   private function createCustomTip(event:ToolTipEvent):void {
                 var ptt:PanelToolTip = new PanelToolTip();    //사용자 정의형 퉅팁 객체 생성
                 ptt.title = "사용자 정의 툴팁";
                 ptt.text= mTipString;                                    // 툴팁 문자열은 전송
                 event.toolTip = ptt;                                 //사용자 정의형 툴팁 객체로 지정
            }       
  
 ]]>
</mx:Script>
<mx:Style source="css/flex_css.css"/>
 <mx:ArrayCollection id="dpd">
  <mx:source>
   <mx:Object label="label1" data="data1" icon="{m1}" toolStr="Elara ToolTip1"/>
   <mx:Object label="label2" data="data1" icon="{m2}" toolStr="Elara ToolTip2"/>
   <mx:Object label="label3" data="data1" icon="{m3}" toolStr="Elara ToolTip3"/>
  </mx:source>
 </mx:ArrayCollection>

<mx:List id="lData" dataProvider="{dpd}" width="240" height="114"
 dragEnabled="true" dropEnabled="true"
 itemRollOver="fnRollOver(event)"
 itemRollOut="fnRollOut(event)"
 />
<mx:Label text="Selected label : {lData.selectedItem.label}"/>
<mx:Label text="Selected data : {lData.selectedItem.data}"/>
<mx:Image source="{lData.selectedItem.icon}"/>
</mx:Application>