如何在TWaver Flex中定制Tree的tooltip

如果您显示过Tree的ToolTip，会发现这个tooltip离鼠标太远了；而且也无法跟随鼠标一起移动；最重要的是，如果想动态更改tooltip也很麻烦。

还是自定义ToolTip灵活：

1. 设置tree.toolTipFunction，关闭默认的tooltip

tree.toolTipFunction = function(element:IData):String {

	return null;

}

2. 监听mousemove事件，动态显示、隐藏以及更新tooltip

tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {

	handleMouseMove(e);

});

3. 由于tree.getTreeDataByMouseEvent方法中，即使鼠标在空白处也有返回值，所以需要特殊处理一下，判断鼠标是否在icon或者text上：

private function showToolTip():Boolean {

	var obj:InteractiveObject = null;

	var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);

	var objects:Array = stage.getObjectsUnderPoint(mousePoint);

	for (var i:int = objects.length-1; i>=0; i--) {

		if (objects[i] is InteractiveObject) {

			obj = objects[i] as InteractiveObject;

			break;

		} else {

			if (objects[i] is Shape && (objects[i] as Shape).parent) {

				obj = (objects[i] as Shape).parent;

				break;

			}

		}

	}

	return obj is UIComponent || obj is UITextField;

}

效果如下：

完整代码： 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

				xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"

				paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="#FFFFFF"

				creationComplete="init()">

	<mx:Script>

		<![CDATA[

			import mx.core.IToolTip;

			import mx.core.UIComponent;

			import mx.core.UITextField;

			import mx.managers.ToolTipManager;



			import twaver.DataBox;

			import twaver.IData;

			import twaver.Link;

			import twaver.Node;

			import twaver.controls.TreeData;



			private var _toolTip:IToolTip;

			private var _lastData:IData = null;

			private var _timer:uint = 0;



			private function init():void {

				var box:DataBox = tree.dataBox;

				tree.toolTipFunction = function(element:IData):String {

					return null;

				};

				tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {

					handleMouseMove(e);

				});

				tree.callLater2(function():void {

					tree.expandAll();

				});



				var from:Node = new Node();

				from.name = "From";

				from.toolTip = "From";

				from.centerLocation = new Point(100, 100);

				box.add(from);

				var to:Node = new Node();

				to.name = "To";

				to.toolTip = "To";

				to.centerLocation = new Point(300, 400);

				box.add(to);

				var link:Link = new Link(from, to);

				link.name = "Link";

				link.toolTip = "Link";

				box.add(link);

			}



			private function handleMouseMove(e:MouseEvent):void {

				var treeData:TreeData = tree.getTreeDataByMouseEvent(e);

				var data:IData = (showToolTip() && treeData && treeData.data) ? treeData.data : null;

				if(data != null){

					var x:Number = tree.mouseX + 10, y:Number = tree.mouseY + 10;

					if(data != _lastData){

						if(_toolTip != null){

							ToolTipManager.destroyToolTip(_toolTip);

						}

						_toolTip = ToolTipManager.createToolTip(data.toolTip, x, y);

						if(_timer){

							clearTimeout(_timer);

						}

						_timer = setTimeout(function():void {

							_timer = 0;

							if(_toolTip){

								_toolTip.text = "test\n" + _toolTip.text;

							}

						}, 1000);

					}else{

						_toolTip.x = x;

						_toolTip.y = y;

					}



				}else{

					if(_toolTip != null){

						ToolTipManager.destroyToolTip(_toolTip);

					}

					_toolTip = null;

				}

				_lastData = data;

			}



			private function showToolTip():Boolean {

				var obj:InteractiveObject = null;

				var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);

				var objects:Array = stage.getObjectsUnderPoint(mousePoint);

				for (var i:int = objects.length-1; i>=0; i--) {

					if (objects[i] is InteractiveObject) {

						obj = objects[i] as InteractiveObject;

						break;

					} else {

						if (objects[i] is Shape && (objects[i] as Shape).parent) {

							obj = (objects[i] as Shape).parent;

							break;

						}

					}

				}

				return obj is UIComponent || obj is UITextField;

			}

		]]>

	</mx:Script>

	<tw:Tree id="tree" width="30%" height="100%"/>

</mx:Application>

 完整代码见附件：见原文最下方