<?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 hide
                toolTipMenu.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>