Adding images inside a Tooltip in Flex 4 - actionscript-3

Question

I am trying to insert images and other html content inside a Tooltip in Flex 4 by making the text htmlText similar to this:
http://blogagic.com/190/easy-flex-tooltip-customization-using-html-tags
My HTMLToolTip class:
package custom
{
import mx.controls.ToolTip;
public class HTMLToolTip extends ToolTip
{
public function HTMLToolTip()
{
super();
}
override protected function commitProperties():void{
super.commitProperties();
textField.htmlText = text;
}
}
}
and on Tooltip Creation, I set the class as the ToolTipManager class
protected function helpToolTip_toolTipCreateHandler(event:ToolTipEvent):void
{
ToolTipManager.toolTipClass = HTMLToolTip;
helpToolTip.tooltip = "<img src='ui_graphic/testimage.png' width='20' height='20'/> this is a <b>tool</b> tip";
}
But it just doesn't seem to work anymore in Flex 4 (judging from various comments online too). The images just don't show up. Every other basic HTML-tag I have tried work fine. Has anyone gotten this to work on Flex 4, or should I look into another (more complex) solution?

Answer 1

Create tooltip class extends RichText:
package classes
{
import mx.core.IToolTip;
import spark.components.RichText;
import spark.utils.TextFlowUtil;
public class RichToolTip extends RichText implements IToolTip
{
public function RichToolTip()
{
super();
mouseEnabled = false;
mouseChildren = false;
setStyle("backgroundColor", "0xeeeeee");
}
override public function set text(value:String):void
{
textFlow = TextFlowUtil.importFromString(value);
}
}
}
In application set new tooltip class:
ToolTipManager.toolTipClass = RichToolTip;
And add tooltip for example over button:
btn.toolTip = "<div><img source='assets/bender_saved.png' width='20' height='20' /><p>this is a test <span fontWeight='bold'>bold</span></p></div>";