Flex Examples

Here’s a basic example of creating a text tool tip using the Flex ToolTipManager class and making the tool tip follow the mouse cursor.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/15/creating-tool-tips-manually-using-the-tooltipmanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.core.IToolTip;
            import mx.managers.ToolTipManager;
            import flash.events.MouseEvent;

            private var tt:IToolTip;

            private function init():void {
                systemManager.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
            }

            private function onMouseMove(evt:MouseEvent):void {
                if (tt) {
                    tt.move(evt.stageX + 10, evt.stageY + 10);
                    evt.updateAfterEvent();
                }
            }

            private function toolTipCreate():void {
                if (tt) {
                    toolTipDestroy();
                }
                tt = ToolTipManager.createToolTip(textInput.text, textInput.x, textInput.y);
            }

            private function toolTipDestroy():void {
                if (tt) {
                    ToolTipManager.destroyToolTip(tt);
                    tt = null;
                }
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="textInput" text="Tool tip text..." />
    <mx:HBox>
        <mx:Button label="create" click="toolTipCreate()" />
        <mx:Button label="destroy" click="toolTipDestroy()" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.