flex ToolTip汇总
flex ToolTip
1.toolTip换行符
<mx:Button id="btn1" toolTip="在工具条提示中 使用换行符"/>
2.设定工具条提示的样式
<mx:Style>ToolTip{fontSize:19;color:#FF6699;}</mx:Style><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"><mx:Script><![CDATA[import mx.controls.ToolTip;public function init():void{ToolTip.maxWidth=100;}]]></mx:Script><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"><mx:Script><![CDATA[import mx.events.ToolTipEvent;import flash.media.Sound;[Embed(source="demo.mp3")]private var beepSound:Class;private var myClip:Sound;public function init():void{TooTip.maxWidth=100;}public function playSoune():void{myClip.play();}public function myListener(event:ToolTipEvent):void{playSoune();}public function init():void{lbl.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,myListener);myClip=new beepSound();}]]></mx:Script><mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"><mx:Script><![CDATA[import mx.managers.ToolTipManager;import mx.events.ToolTipEvent;import flash.media.Sound;[Embed(source="demo.mp3")]private var beepSound:Class;private var myClip:Sound;public function init():void{TooTip.maxWidth=100;ToolTipManager.showEffect=fadeIn;}]]></mx:Script><mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" /><mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000" /><mx:Panel ><mx:Button id="btn" toolTip="demoasdf" /></mx:Panel ><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" ><mx:Script><![CDATA[import mx.managers.ToolTipManager;import mx.events.ToolTip;public var myTip:ToolTip;public function init():void{var s:String ="保存,应用,退出";myTip=ToolTipManager.createToolTip(s,10,10) as ToolTip;myTip.setStyle("backgroundColor",0xFFCC00);myTip.width=300;myTip.height=40;}public funciton destroyBigTip():void{ToolTipManager.destroyToolTip(myTip);}]]></mx:Script><mx:Button id="btn" toolTip="test toolTip" rollOver="init()" rollOut="destroyBigTip()"/><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" ><mx:Script><
package renderers{import flash.events.Event;import flash.events.MouseEvent;import flash.text.TextFieldAutoSize;import mx.controls.Alert;import mx.controls.LinkButton;import mx.controls.Menu;import mx.controls.listClasses.IListItemRenderer;import mx.controls.menuClasses.IMenuItemRenderer;import mx.core.EdgeMetrics;import mx.core.IDataRenderer;import mx.core.UIComponent;import mx.core.UITextField;import mx.events.FlexEvent;public class MenuToolTipRenderer extends UIComponent implements IMenuItemRenderer, IDataRenderer, IListItemRenderer{private var textField:UITextField;private var clickText:LinkButton;public function get measuredTypeIconWidth():Number//类型图标（单选/复选）的宽度 {return 33;}public function get measuredBranchIconWidth():Number//分支图标的宽度 {return 33;}public function get measuredIconWidth():Number//图标的宽度{return 33;}//-------------------------------------public function MenuToolTipRenderer(){super();this.addEventListener(FlexEvent.DATA_CHANGE, renderComponent);this.setStyle("cornerRadius", 5);this.maxWidth = 250;}//-------------------------------------// Internal variable for the property value.private var _menu:Menu;public function get menu():Menu{return _menu;}public function set menu(value:Menu):void{_menu = value;}//------------------------------------- private var _data:Object; [Bindable("dataChange")] public function get data():Object {return _data; } public function set data(value:Object):void {_data = value; dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); } //-------------------------------------private function get borderMetrics():EdgeMetrics{return EdgeMetrics.EMPTY;}//-------------------------------------private function renderComponent(event:FlexEvent):void{if(_data != null && _data != "null"){textField.htmlText = data.label;invalidateProperties();invalidateSize();invalidateDisplayList();}}//-------------------------------------private function buttonClick(event:Event):void{mx.controls.Alert.show("button click");}//-------------------------------------override protected function createChildren():void{super.createChildren();// Create the TextField that displays the tooltip text.if (!textField){textField = new UITextField();textField.autoSize = TextFieldAutoSize.LEFT;textField.mouseEnabled = false;textField.multiline = true;textField.selectable = false;textField.wordWrap = true;textField.styleName = this;addChild(textField);}}//-------------------------------------override protected function measure():void{super.measure();var bm:EdgeMetrics = borderMetrics;var leftInset:Number = bm.left + getStyle("paddingLeft");var topInset:Number = bm.top + getStyle("paddingTop");var rightInset:Number = bm.right + getStyle("paddingRight");var bottomInset:Number = bm.bottom + getStyle("paddingBottom");var widthSlop:Number = leftInset + rightInset;var heightSlop:Number = topInset + bottomInset;textField.wordWrap = false;if (textField.textWidth + widthSlop > this.maxWidth){textField.width = this.maxWidth - widthSlop;textField.wordWrap = true;}measuredWidth = textField.width + widthSlop;measuredHeight = textField.height + heightSlop;this.parent.parent.height = this.parent.height = this.height = measuredHeight + 25;this.parent.parent.width = this.parent.width = this.width = measuredWidth;createAdditionalContent(measuredWidth, measuredHeight);}private function createAdditionalContent(measuredWidth:Number, measuredHeight:Number):void{clickText = new LinkButton();clickText.label = "More Info";clickText.width = 70;clickText.height = 18;clickText.setStyle("fontSize", 9);clickText.setStyle("color", "blue");clickText.buttonMode = true;clickText.visible = true;clickText.y = measuredHeight;clickText.x = measuredWidth - clickText.width - 8;clickText.addEventListener(MouseEvent.CLICK, dispatchClick);addChild(clickText);}private function dispatchClick(e:Event):void{this.dispatchEvent(new Event("buttonClicked", true))}}}<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" viewSourceURL="srcview/index.html" width="600" height="300"><mx:DataGrid id="dg" dataProvider="{tmpArray}" width="550" mouseOut="dgMouseOut(event)" mouseOver="dgMouseOver(event)" mouseMove="dgMouseMove(event)"><mx:columns><mx:Array><mx:DataGridColumn headerText="Label" dataField="label" showDataTips="true" /><mx:DataGridColumn headerText="Data" dataField="data" /></mx:Array></mx:columns></mx:DataGrid><mx:Style>.menuToolTip { backgroundAlpha: 1; backgroundColor: #ffffcc; useRollOver: false; borderStyle: solid; borderThickness: 0; borderColor: #000000; selectionColor: #7fcdfe; dropShadowEnabled: true; cornerRadius: 5; paddingLeft: 3; paddingRight: 3; paddingTop: 3; paddingBottom: 3; }</mx:Style><mx:Script><![CDATA[import mx.automation.delegates.controls.ListBaseContentHolderAutomationImpl;import mx.controls.listClasses.ListBase;import renderers.MenuToolTipRenderer;import mx.controls.dataGridClasses.DataGridItemRenderer;import mx.managers.ToolTipManager;import mx.controls.Menu;import mx.events.MenuEvent;import flash.geom.Point;[Bindable] private var dgMouseX:Number = 0;[Bindable] private var dgMouseY:Number = 0;private var toolTipMenu:Menu;private var toolTipTimer:Timer;[Bindable]public var tmpArray:Array = [{label: '<b>mary</b> had a little lamb', data: 55, link:'http://www.meutzner.com/blog'}, {label: 'All the kings men, and all the kings horses', data: 56, link:'http://www.meutzner.com/blog'}, {label: 'baa baa black sheep, have you any wool', data: 57, link:'http://www.meutzner.com/blog'}, {label: 'jack and jill went up the hill', data: 58, link:'http://www.meutzner.com/blog'}, {label: 'little miss muffet, sat on a tuffet, eating her curds and whey', data: 59, link:'http://www.meutzner.com/blog'} ];//-------------------------------------public function init():void{ToolTipManager.enabled = false;}//-------------------------------------private function createMenu(data:Object):void {toolTipTimer.stop();var menuData:Array = [{label: data.label, link: data.link}];toolTipMenu = Menu.createMenu(this, menuData, false);toolTipMenu.labelField="label";toolTipMenu.width = 250;toolTipMenu.setStyle("fontSize", 10);toolTipMenu.setStyle("themeColor", 0xFF9900);toolTipMenu.itemRenderer = new ClassFactory(renderers.MenuToolTipRenderer);toolTipMenu.data = data;toolTipMenu.selectable = false;toolTipMenu.setStyle("styleName", "menuToolTip");toolTipMenu.setStyle("openDuration", 0);//toolTipMenu.setStyle("selectionEasingFunction", myEasingFunction);toolTipMenu.addEventListener(MouseEvent.ROLL_OUT, hideToolTip);toolTipMenu.addEventListener("buttonClicked", catchButtonClick);var pt1:Point = new Point(this.dgMouseX, this.dgMouseY);pt1 = dg.localToGlobal(pt1);//offset this for now to fix slight bug where immediate mouseover of tooltip causes it to hidetoolTipMenu.show(pt1.x+10, pt1.y+0); } //------------------------------------- private function hideToolTip(event:MouseEvent):void {//trace("MENU --- " + event.relatedObject + " - " + event.target + " - " + event.currentTarget);toolTipMenu.hide(); } //------------------------------------- private function dgMouseMove(event:MouseEvent):void {this.dgMouseX = dg.mouseX;this.dgMouseY = dg.mouseY; } //------------------------------------- private function dgMouseOver(event:MouseEvent):void {this.dgMouseX = dg.mouseX;this.dgMouseY = dg.mouseY;//trace("DATAGRID OVER --- " + event.target + " - " + event.currentTarget + " - " + event.relatedObject);if(event.target is DataGridItemRenderer){if(toolTipMenu != null){if(toolTipMenu.visible && toolTipMenu.data == event.target.data) return;}if(!DataGridItemRenderer(event.target).styleName.showDataTips)return;toolTipTimer = new Timer(1000, 0);toolTipTimer.addEventListener(TimerEvent.TIMER, function():void { createMenu(event.target.data); } );toolTipTimer.start();} } //------------------------------------- private function dgMouseOut(event:MouseEvent):void {if(toolTipTimer) toolTipTimer.stop();//trace("DATAGRID OUT --- " + event.target + " - " + event.currentTarget + " - " + event.relatedObject);if(event.relatedObject is mx.controls.listClasses.ListBaseContentHolder || event.relatedObject is MenuToolTipRenderer){return;}if(event.target is DataGridItemRenderer){if(event.relatedObject is Menu || !event.relatedObject is MenuToolTipRenderer) return;if(toolTipMenu != null) toolTipMenu.hide(); } } //------------------------------------- private function catchButtonClick(e:Event):void {mx.controls.Alert.show(e.target.data.label + " was clicked to take you to " + e.target.data.link); }]]></mx:Script></mx:Application>
<mx:Script><![CDATA[import mx.managers.ToolTipManager;public var myTip:ToolTip;private function showTip(event:MouseEvent,type:String):void{Tip=ToolTipManager.createToolTip(str,event.stageX,event.stageY) as ToolTip;//根据需要动态设置tooltip的style属性myTip.move(event.stageX,event.stageY);}private function hideTip():void{ToolTipManager.destroyToolTip(myTip);}]]></mx:Script><mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip" width="212" borderThickness="2" backgroundColor="0xCCCCCC" dropShadowEnabled="true" borderColor="black" roundedBottomCorners="true" height="90"> <mx:Script> <![CDATA[ //注意 Panel 中的 implements="mx.core.IToolTip" [Bindable] private var _text:String=""; public function get text():String { return _text ; } public function set text(value:String):void { this._text=value; } ]]></mx:Script> <mx:Text text="{text}" percentWidth="100"/> </mx:Panel>
