Flex 3 - 在自定义工具提示中使用 html 标签的问题

Question

我正在使用自定义工具提示以便能够使用 html 标签。我使用的方法描述为here。

我正在使用 SDK v.3.5。
我还做了一些小改动，以便 TooltipManager.tooltipClass 能够正常工作（查看this post 了解更多详细信息）。

这是一些代码。

HtmlTooltip.as:

public class HtmlTooltip extends ToolTip
{
    public function HtmlTooltip()
    {
        super();
        setStyle("borderColor", "0xF6F4F4");
    setStyle("shadowColor", "0xababab"); 
    setStyle("color", 'none'); 
    setStyle("fontWeight", 'normal');
    }

    override protected function commitProperties():void
{
    super.commitProperties();

    textField.htmlText = text;
}
}

用我的自定义工具提示替换默认工具提示...

    private function initializeTooltips() : void {
        ToolTipManager.toolTipClass = HtmlTooltip;

        ToolTipManager.showDelay = 750;
        ToolTipManager.hideDelay = Infinity;
    }

TooltipsManager.as（该类实例化工具提示以获得最终样式）

public class TooltipsManager
{
    private static var _customToolTip:HtmlTooltip;
    private static var _onTooltip:Boolean = false;
    private static var _onTarget:Boolean = true;
    private static var _timerOn:Boolean = false;
    private static const TIMER_DURATION:int = 1500;

    public function TooltipsManager()
    {
    }

    public static function showToolTipLeft(e:MouseEvent, text:String):void
{
    removeTooltip('newTooltip');
    _onTarget = true;

    var ptMouse:Point = new Point(e.currentTarget.mouseX, e.currentTarget.mouseY);

    // Convert the targets 'local' coordinates to 'global' -- this fixes the
    // tooltips positioning within containers.
    ptMouse = e.currentTarget.contentToGlobal(ptMouse);

    // Move tooltip below the target
    var ptTarget:Point = new Point(e.currentTarget.x, e.currentTarget.y);
    ptTarget = e.currentTarget.parent.contentToGlobal(ptTarget);

    // Create tooltip and add mouseevents listeners         
    _customToolTip = ToolTipManager.createToolTip(text, ptMouse.x, ptMouse.y, "errorTipLeft") as HtmlTooltip;  

        _customToolTip.addEventListener(MouseEvent.MOUSE_OVER, customToolTipHandler);
        _customToolTip.addEventListener(MouseEvent.MOUSE_OUT, customToolTipHandler); 

    // Move tooltip above target
    _customToolTip.x = ptTarget.x - _customToolTip.width - 2;
}

/**
* Remove tooltip if conditions fullfiled
* Case 1: destruction is called after the countdown ends (=> not over target anymore), 
*           still have to check if mouse is over the tooltip
* Case 2: destruction is called when mouseout from tooltip (=> not over tooltip anymore),
*           still have to check if mouse is on target or if the timer is running
* Case 3: destruction is called because new tooltip is to be created 
*/
private static function removeTooltip(from:String):void
{
    if(_customToolTip != null 
        && ((from == 'timer' && !_onTooltip)
            || (from == 'tooltip' && !_onTarget && !_timerOn)
            || from == 'newTooltip')){
            ToolTipManager.destroyToolTip(_customToolTip);
            _customToolTip = null;
            _onTarget = _onTooltip = _timerOn = false;
    }            
}

/**
* Launch TIMER_DURATION milliseconds timer
* In some cases, the tooltip will contain clickable links, which wouldn't be able to be clicked
* if the tooltip was destroyed just after a mouseout event from the target.
* If after TIMER_DURATION milliseconds, the mouse is not over the tooltip, then it's destroyed. 
*/
    public static function launchTooltipTimer():void{
        _onTarget = false;
        _timerOn = true;
        setTimeout(timerOut, TIMER_DURATION);
    }

    private static function timerOut():void{
        _timerOn = false;
        removeTooltip('timer');
    }

    /**
     * Handler for mouseevents from tooltip
     * If the mouse is over the tooltip, it won't be destroyed.
     */
    private static function customToolTipHandler(e:MouseEvent):void{
        switch(e.type){
            case MouseEvent.MOUSE_OVER:
                _onTooltip = true;
                break;
            case MouseEvent.MOUSE_OUT:
                _onTooltip = false;
                removeTooltip('tooltip');
                break;
        }
    }
}

一切正常，但有两件事：

• 首先，字体颜色标签不起作用。如果我使用像<font color='0xadadad'>...</font> 这样的东西，它就行不通了。但是，如果我使用<u>...</u>，它可以正常工作
• 其次，<a href='...'>...</a> 也不起作用。我检查了几个网站，解决方案是将文本的可选择属性设置为 true。这个技巧对我不起作用，我没有想法......

如果您需要更多数据，我很乐意添加任何详细信息。非常欢迎您的建议:)

问候

Answer 1

我找到了问题第一部分的解决方案，所以在这里以防万一有人遇到相同的问题：

使用颜色属性时，不要使用0X[hexa color code]，只需使用#[hexa color code] 即可！