Question

我正在使用flex sdk 3.6 我在数据网格上使用工具提示。这个工具提示是带有一些HTTP链接的html。当我将鼠标移到工具提示工具提示消失时

可能有点想法？

我的工具提示源代码

package com
{
    import mx.controls.ToolTip;

    public class HTMLToolTip extends ToolTip
    {
        public function HTMLToolTip()
        {    super(); }


        override protected function commitProperties():void{
            super.commitProperties();
            textField.htmlText = text;
        }
    }
}

Answer 1

您可以自定义itemRenderer和工具提示渲染器，然后观察MOUSE_OUT和MOUSE_OVER事件。

我将这个功能打包成一个类。

public class ToolTipUtil
{
    /**
     * register a tip
     * 
     * @param target
     * @param toolTipClazz
     * 
     */     
    public static function registerTipsClass(target:IUIComponent, toolTipClazz:Class):void
    {
        var toolTip:IUIComponent = new toolTipClazz();
        registerTips(target, toolTip);
    }

    /**
     * register a tip
     * 
     * @param target
     * @param toolTip
     * 
     */     
    public static function registerTips(target:IUIComponent, toolTip:IUIComponent):void
    {
        toolTip.visible = false;
        PopUpManager.addPopUp(toolTip, DisplayObject(target));

        target.addEventListener(MouseEvent.MOUSE_OVER, function mouseOverHandler(event:MouseEvent):void
        {
            if (!toolTip.visible)
            {
                toolTip.visible = true;
                showTipsOnMouse(target, toolTip);
            }
        });

        target.addEventListener(MouseEvent.MOUSE_OUT, function mouseOutHandler(event:MouseEvent):void
        {
            if (toolTip.visible)
                toolTip.visible = false;
        });
    }

    /**
     * toolTip show on the target
     *  
     * @param target IUIComponent
     * @param toolTip IUIComponent
     * 
     */     
    public static function showTipsOnTarget(target:IUIComponent, toolTip:IUIComponent):void
    {
        var height:Number = target.height;
        var systemManager:ISystemManager = target.systemManager;
        // Calculate global position of label.
        var sm:ISystemManager = systemManager.topLevelSystemManager;
        var sbRoot:DisplayObject = sm.getSandboxRoot();
        var screen:Rectangle;
        var pt:Point = new Point(0, 0);
        pt = target.localToGlobal(pt);
        pt = sbRoot.globalToLocal(pt);          

        toolTip.move(pt.x, pt.y + (height - toolTip.height) / 2);

        if (sm != sbRoot)
        {
            var request:InterManagerRequest = new InterManagerRequest(InterManagerRequest.SYSTEM_MANAGER_REQUEST, 
                false, false,
                "getVisibleApplicationRect"); 
            sbRoot.dispatchEvent(request);
            screen = Rectangle(request.value);
        }
        else
            screen = sm.getVisibleApplicationRect();

        var screenRight:Number = screen.x + screen.width;
        pt.x = toolTip.x;
        pt.y = toolTip.y;
        pt = sbRoot.localToGlobal(pt);
        if (pt.x + toolTip.width > screenRight)
            toolTip.move(toolTip.x - (pt.x + toolTip.width - screenRight), toolTip.y);
    }

    /**
     * toolTip show under the mouse
     *  
     * @param target IUIComponent
     * @param toolTip IUIComponent
     * 
     */     
    public static function showTipsOnMouse(target:IUIComponent, toolTip:IUIComponent):void
    {
        var systemManager:ISystemManager = target.systemManager;
        var sm:ISystemManager = systemManager.topLevelSystemManager;
        var sbRoot:DisplayObject = sm.getSandboxRoot();

        var screenWidth:Number = systemManager.screen.width;
        var screenHeight:Number = systemManager.screen.height;
        // Position the upper-left of the tooltip
        // at the lower-right of the arrow cursor.
        var x:Number = DisplayObject(systemManager).mouseX + 11;
        var y:Number = DisplayObject(systemManager).mouseY + 22;

        // If the tooltip is too wide to fit onstage, move it left.
        var toolTipWidth:Number = toolTip.width;
        if (x + toolTipWidth > screenWidth)
            x = screenWidth - toolTipWidth;

        // If the tooltip is too tall to fit onstage, move it up.
        var toolTipHeight:Number = toolTip.height;
        if (y + toolTipHeight > screenHeight)
            y = screenHeight - toolTipHeight;

        var pos:Point = new Point(x, y);
        pos = DisplayObject(systemManager).localToGlobal(pos);
        pos = DisplayObject(sbRoot).globalToLocal(pos);
        toolTip.move(pos.x, pos.y);
    }
}

}

Answer 2

试试这个，它只会创建一个HTMLToolTip，然后如果你想在鼠标悬停在不同的行上时更改内容，你可以设置HTMLToolTip的数据来改变内容。

private var htmlToolTip:HTMLToolTip = new HTMLToolTip();

        protected function datagrid1_itemRollOverHandler(event:ListEvent):void
        {
            ToolTipUtil.showTipsOnMouse(event.itemRenderer, htmlToolTip);
            htmlToolTip.data = event.itemRenderer.data;
            htmlToolTip.visible = true; 
        }

        protected function datagrid1_itemRollOutHandler(event:ListEvent):void
        {
            htmlToolTip.visible = false;                
        }

        protected function datagrid1_creationCompleteHandler(event:FlexEvent):void
        {
            // TODO Auto-generated method stub
            htmlToolTip.visible = false;
            PopUpManager.addPopUp(htmlToolTip, Application.application as DisplayObject);
        }

<mx:DataGrid dataProvider="{dataArray}" itemRollOver="datagrid1_itemRollOverHandler(event)"
             itemRollOut="datagrid1_itemRollOutHandler(event)"
             creationComplete="datagrid1_creationCompleteHandler(event)">
    <mx:columns>
        <mx:DataGridColumn headerText="Title" dataField="label">
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

flex在工具提示中链接html

2 个答案: