Visualizzazione delle titoli neri e rossi come Balone del linguaggio

Question

Sto portando un gioco di carte da Pure Flash/AS3 a Flex 4.5:

Ho quasi finito, ma mancano i "paloons del linguaggio" contrassegnati dal colore blu nello screenshot sopra.

Quei "Baloons" si sbiadiscono, mostrano rosso (se contengono cuori o diamanti) o testo nero e finalmente sbiadiscono.

Sto cercando di implementarli come mx.controls.tooltipS e hanno preparato un semplice caso di test, in cui 3 utenti sono rappresentati da faccine e puoi spingere un "talk" -button per farli parlare:

<?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>

Qualcuno può darmi suggerimenti?

1. Come far apparire i titoli a piacimento a piacimento? (e non solo sul mouse mouse)
2. Come cambiare il loro colore (ho trovato come impostarlo solo una volta da CSS)

AGGIORNARE:

Ho provato quanto segue

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

Ma questo non funziona troppo bene - nessun effetto, nessuna scomparsa (immagino di dover chiamare DestroyToolTip me stesso). Mi chiedo se Tooltip possa essere (AB) usato per il mio scopo di rappresentare "Baloons" in modo elegante ...

Answer 1

Personalmente, ho trovato il sistema di punta dello strumento piuttosto limitante, e ogni volta che voglio fare qualcosa di un po 'più diverso, sembra più facile implementarlo manualmente. Generalmente in questo caso aggiungo un controllo popuperico ai componenti che necessitano di questi display di sovrapposizione. Quindi hai il pieno controllo manuale su ciò che viene mostrato ed esattamente come viene mostrato.

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

Esistono alcuni modi per farlo, oltre a costruire la componente della descrizione di strumenti come sottoclasse di gruppo, aggiungendolo da bambino e tenerne traccia.