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

我找到了我的问题的第一部分的解决方案，所以在这里，以防任何人来到同一个pb：

使用color属性时，不要使用0X[hexa color code]，只需使用＃[hexa color code]就行了！

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

1 个答案: