Depois de ter visto o site do Adobe Air on Tour gostei muito da forma como eram mostradas as ToolTips.

Sendo assim, tentei verificar como se conseguia a “setinha” que aparece junto da ToolTips.

Descobri então que há um parâmetro que passamos no método para criar um objecto deste tipo que faz com que possamos escolher se a “seta” aparece, e se sim, onde.

Claro que até pode não ser a melhor maneira de fazer este processo, uma vez que perdemos a noção de erro nas tooltips, e podemos criar o mesmo efeito através de styling através de CSS (confesso que não sei se é possível adicionar a seta…) mas esta deve ser, certamente, a forma mais rápida e mais fácil.

createToolTip(textoToolTip_str, coordX_num, coordY_num, estiloErro_str, contexto);

Segue o código explicado com um exemplo em que não utilizamos a errorTip e outros três em que modificados a propriedade do estilo do erro para que apareça em zonas diferentes:

Exemplo:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
                layout=”vertical”>
 
    <mx:Script>
        <![CDATA[
            import mx.managers.ToolTipManager;
            import mx.controls.ToolTip;
 
            // Variáveis utilizadas no código
            private var myTip : ToolTip;
            private var et_txt : String;
            private var tipX : Number;
            private var tipY : Number;
            private var tt_txt : String;
 
            /**
             * createBigTip
             * @param e - Objecto com a referência ao que foi clicado
             */
            private function createBigTip( e : Object ) : void
            {
 
                // Referência ao nome do botão
                tt_txt = String( e.target.name );
 
                switch ( tt_txt )
                {
 
                    /**
                     * Atribuição dos parâmetros
                     * et_txt - String que nos diz se a "seta" aparece e onde;
                     * tt_txt - Texto que é passado para a caixa de texto;
                     * tipX - Coordenada da tooltip no eixo X;
                     * tipT - Coordenada da tooltip no eixo Y;
                     */
 
                    case "button1" :
                        et_txt = null;
                        tt_txt = "et_txt = null";
                        tipX = e.currentTarget.x + e.currentTarget.width + 10;
                        tipY = e.currentTarget.y;
                        break;
                    case "button2" :
                        et_txt = "errorTipRight";
                        tt_txt = "et_txt = errorTipRight";
                        tipX = e.currentTarget.x + e.currentTarget.width + 10;
                        tipY = e.currentTarget.y;
                        break;
 
                    case "button3" :
                        et_txt = "errorTipAbove";
                        tt_txt = "et_txt = errorTipAbove";
                        tipX = e.currentTarget.x;
                        tipY = e.currentTarget.y - e.currentTarget.height - 25;
                        break;
                    case "button4" :
                        et_txt = "errorTipBelow";
                        tt_txt = "et_txt = errorTipBelow";
                        tipX = e.currentTarget.x;
                        tipY = e.currentTarget.y + e.currentTarget.height + 10;
                        break;
 
                }
 
                // Criação da ToolTip com os valores referidos acima
                myTip = ToolTipManager.createToolTip( tt_txt, tipX, tipY, et_txt )as ToolTip;
            }
 
            /**
             * destroyBigTip
             * @param e - Objecto com referência ao que foi clicado
             */
            private function destroyBigTip( e : Object ) : void
            {
                ToolTipManager.destroyToolTip( myTip );
            }
        ]]>
    </mx:Script>
 
    <!– Botões –>
 
    <mx:Button id=”button1″
               label=”Show right”
               rollOver=”createBigTip(event)”
               rollOut=”destroyBigTip(event)”/>
    <mx:Button id=”button2″
               label=”Show right”
               rollOver=”createBigTip(event)”
               rollOut=”destroyBigTip(event)”/>
    <mx:Button id=”button3″
               label=”Show above”
               rollOver=”createBigTip(event)”
               rollOut=”destroyBigTip(event)”/>
    <mx:Button id=”button4″
               label=”Show bellow”
               rollOver=”createBigTip(event)”
               rollOut=”destroyBigTip(event)”/>
 
</mx:Application>

 Se quiserem descarregar o projecto:
ToolTips.zip

Se quiserem saber mais sobre ToolTips..
Flex Help Resource Center
Adobe Developer Connection

Abraço e até daqui a uns dias!