Displaying black and red ToolTips as speech baloons

Question

I'm porting a card game from pure Flash/AS3 to Flex 4.5:

I'm almost done, but the "speech baloons" marked by the blue color in the screenshot above are missing.

Those "speech baloons" fade in, display red (if they contain hearts or diamonds char) or black text and finally fade out.

I'm trying to implement those as mx.controls.ToolTips and have prepared a simple test case, where 3 users are represented by smiley-buttons and you can push a "Talk"-button to make them talk:

<?xml version="1.0"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    width="400" height="300"
    initialize="init();">

    <fx:Declarations>
        <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="2000"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.managers.ToolTipManager;

            private var i:uint = 0;

            private function init():void {
                ToolTipManager.enabled = false;
                ToolTipManager.showEffect = fadeIn;
            }

            private function talk():void {
                var str:String = 'Me plays 10' + (i % 2 ? '♥' : '♠');
                // this does not make the ToolTip appear?
                this['user' + (++i % 3)].toolTip = str;
                // how to set color according to isRed(str)?
            }

            private function isRed(str:String):Boolean {
                return (str.indexOf('♦') > 0 || str.indexOf('♥') > 0);
            }
        ]]>
    </fx:Script>

    <s:Button id="user0" horizontalCenter="0" bottom="0" label=":-)" />
    <s:Button id="user1" left="0" top="0" label=":-)" />
    <s:Button id="user2" right="0" top="0" label=":-)" />
    <s:Button right="0" bottom="0" label="Talk!" click="talk()" />
</s:Application>

Can anybody please give me hints?

1. How to make ToolTips appear at will? (and not just on mouse hover)
2. How to change their color (I only found how to set it once by CSS)

UPDATE:

I've tried the following

        private var tip0:ToolTip;
        private var tip1:ToolTip;
        private var tip2:ToolTip;

        private function talk():void {
            var str:String = 'Me plays 10' + (++i % 2 ? '♥' : '♠');
            var btn:Button = this['user' + (i % 3)];
            var tip:ToolTip = this['tip' + (i % 3)];
            tip = ToolTipManager.createToolTip(str, btn.x + 10, btn.y + 10, "errorTipBelow", IUIComponent(btn)) as ToolTip;
        }

but this does not work too well - no effects, no disappearing (I guess I have to call destroyToolTip myself). I wonder if ToolTip can be (ab)used for my purpose of representing "speech baloons" in an elegant way at all...

Answer 1

Personally, I have found the tool tip system rather limiting, and any time I want to do something a bit more different, it just seems easier to implement it manually. Generally in this case I would add a PopUpAnchor control to the components that need these overlay displays. Then you have full manual control over what is shown, and exactly how it is shown.

http://blog.flexexamples.com/category/spark/popupanchor-spark/

There are quite a few ways to do this though as well as just building the tooltip component as a subclass of Group, adding it as a child, and keeping track of it.