如何在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>

 

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