Question

I’m using a custom tooltip in order to be able to use html tags. The method I used is described here.

I’m using SDK v.3.5.
I also did a little hack so that the TooltipManager.tooltipClass would work (check this post for more details).

Here’s some code.

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

replacing the default tooltip by my custom one…

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

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

TooltipsManager.as (this class instantiates the tooltip in order to get the final styling)

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

Everything works fine BUT 2 things:

• First, font colors tags don’t work. If ever I use sth like <font color='0xadadad'>...</font> it won’t work. However, if I use <u>...</u>, it works fine
• Second, the <a href='...'>...</a> does not work either. I checked in several websites, and the solution would be to set the selectable property of the text to true. This trick does not work for me and I’m out of ideas…

I’ll be glad to add any details if you need more data. Your suggestions are more than welcome 🙂

Regards

Answer 1

I found the solution for the first part of my issue, so here it is just in case anybody comes accross the same pb:

When using the color property, instead of using 0X[hexa color code] just use #[hexa color code] and it works!