How to Customize the Tooltip in Tree in TWaver Flex

If you have seen the tooltip in Tree, you must have found that it is too far away from your mouse. What’s more, it is unable to move following the mouse. Worse still, it is quite troublesome to dynamically change the tooltip.

There is no doubt that the customized tooltip is much more flexible.

1. Set tree.toolTipFunction and close the tooltip in default.


tree.toolTipFunction = function(element:IData):String {
    return null;
}



2. Listens to mousemove events to dynamically show, hide and update tooltip.


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



3. Since even if there is nothing under your mouse there will still be a return value, it needs special handling to judge whether your mouse is on an icon or some 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;
}

The final effect:


 

The complete code:

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