Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ -->
<s:Application name="Halo_ToolTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|ToolTip {
            backgroundAlpha: 1.0;
            backgroundColor: black;
            color: white;
            cornerRadius: 0;
            fontSize: 24;
        }
    </fx:Style>
 
    <s:Button id="btn"
            label="Spark Button"
            creationComplete="btn.toolTip = mx_internal::VERSION;"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

Or you can set the ToolTip CSS declaration using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ -->
<s:Application name="Halo_ToolTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.ToolTip");
                if (!cssDecl) {
                    cssDecl = new CSSStyleDeclaration("mx.controls.ToolTip");
                }
                cssDecl.setStyle("backgroundAlpha", 1.0);
                cssDecl.setStyle("backgroundColor", "black");
                cssDecl.setStyle("color", "white");
                cssDecl.setStyle("cornerRadius", 0);
                cssDecl.setStyle("fontSize", 24);
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Spark Button"
            creationComplete="btn.toolTip = mx_internal::VERSION;"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/10/setting-the-tooltip-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_fullScreenButton_toolTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Script>
        <![CDATA[
            private function init():void {
                videoPlayer.fullScreenButton.toolTip = "Toggle full screen";
            }
        ]]>
    </fx:Script>

    <s:SimpleText id="lbl"
            text="Roll over full screen button to see tool tip."
            fontWeight="bold"
            left="10"
            top="10" />

    <s:VideoPlayer id="videoPlayer"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            muted="true"
            horizontalCenter="0"
            verticalCenter="0"
            initialize="init();" />

</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/10/setting-the-tooltip-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_fullScreenButton_toolTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import flash.text.engine.FontWeight;
            import spark.components.VideoPlayer;
            import spark.primitives.SimpleText;

            private var lbl:SimpleText;
            private var videoPlayer:spark.components.VideoPlayer;

            private function init():void {
                lbl = new SimpleText();
                lbl.text = "Roll over full screen button to see tool tip.";
                lbl.setStyle("fontWeight", FontWeight.BOLD);
                lbl.left = 10;
                lbl.top = 10;
                addElement(lbl);

                videoPlayer = new VideoPlayer();
                videoPlayer.source = "http://helpexamples.com/flash/video/cuepoints.flv";
                videoPlayer.muted = true;
                videoPlayer.horizontalCenter = 0;
                videoPlayer.verticalCenter = 0;
                videoPlayer.addEventListener(FlexEvent.INITIALIZE, videoPlayer_initialize);
                addElement(videoPlayer);
            }

            private function videoPlayer_initialize(evt:FlexEvent):void {
                videoPlayer.fullScreenButton.toolTip = "Toggle full screen";
            }
        ]]>
    </fx:Script>

</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .errorTip {
            borderColor: haloOrange;
            color: black;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontWeight: normal;
        }

        TextInput {
            errorColor: haloOrange;
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            errorString="Hey, you missed a spot!" />

</mx:Application>

View source is enabled in the following example.

For an example of setting the .errorTip selector’s borderColor style dynamically using ActionScript, see “Dynamically styling error tips in Flex”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontWeight: normal;
            fontFamily: ComicSansMSEmbedded;
        }

        .errorTip {
            borderStyle: "errorTipAbove";
            fontFamily: "ComicSansMSEmbedded";
            fontSize: 12;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ToolTipEvent;
            import mx.controls.ToolTip;

            private function init():void {
                ToolTip.maxWidth = textInput.width;
            }

            private function textInput_toolTipShown(evt:ToolTipEvent):void {
                var tt:ToolTip = evt.toolTip as ToolTip;
                tt.x = textInput.x;
                tt.y = (textInput.y - tt.height);
                tt.rotation = 5;
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="textInput" text="{new Date().toDateString()}"
            errorString="The quick brown fox jumped over the lazy dog"
            toolTipShown="textInput_toolTipShown(event);" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/21/creating-tool-tips-on-the-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:RichTextEditor id="richTextEditor"
            title="I'm a rich text editor"
            showToolTips="true"
            fontFamilyToolTip="Select a font family."
            fontSizeToolTip="Select a font size."
            boldToolTip="I'm bold"
            italicToolTip="I'm italic"
            underlineToolTip="I'm an underline"
            colorPickerToolTip="Select a color."
            alignToolTip="Left | Center | Right | Justified"
            bulletToolTip="I'm a bullet"
            linkToolTip="I'm a link" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/05/setting-a-flex-tool-tips-maximum-width/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ToolTip;
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="ToolTip.maxWidth:" />
        <mx:HSlider id="slider"
                minimum="50"
                maximum="300"
                value="{ToolTip.maxWidth}"
                liveDragging="true"
                snapInterval="5"
                tickInterval="10"
                dataTipPrecision="0"
                change="ToolTip.maxWidth = slider.value" />
        <mx:Label text="{slider.value}" />
    </mx:ApplicationControlBar>

    <mx:Button label="Roll over to see tool tip"
            toolTip="The quick brown fox jumped over the lazy dog." />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/04/adding-animations-and-effects-to-flex-tool-tips/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

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

            private function init():void {
                ToolTipManager.hideDelay = 2000;
                ToolTipManager.showEffect = rotate;
                ToolTipManager.hideEffect = zoom;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: url("./fonts/arial.ttf");
            fontFamily: "ArialEmbedded";
        }

        ToolTip {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>

    <mx:Rotate id="rotate" />
    <mx:Zoom id="zoom" />

    <mx:Button label="Roll over me to see tool tip"
            toolTip="The quick brown fox..." />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/03/controlling-a-flex-tool-tips-show-delay-hide-delay-and-scrub-delay/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">

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

            private function init():void {
                showDelayMS = ToolTipManager.showDelay;
                hideDelayMS = ToolTipManager.hideDelay;
                scrubDelayMS = ToolTipManager.scrubDelay;
            }
        ]]>
    </mx:Script>

    <mx:Number id="showDelayMS" />
    <mx:Number id="hideDelayMS" />
    <mx:Number id="scrubDelayMS" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="showDelay:" />
        <mx:NumericStepper id="showDelayNS"
                minimum="0"
                maximum="2000"
                value="{showDelayMS}"
                stepSize="100"
                change="ToolTipManager.showDelay = showDelayNS.value" />

        <mx:Spacer width="50%" />

        <mx:Label text="hideDelay:" />
        <mx:NumericStepper id="hideDelayNS"
                minimum="0"
                maximum="15000"
                value="{hideDelayMS}"
                stepSize="100"
                change="ToolTipManager.hideDelay = hideDelayNS.value" />

        <mx:Spacer width="50%" />

        <mx:Label text="scrubDelay:" />
        <mx:NumericStepper id="scrubDelayNS"
                minimum="0"
                maximum="15000"
                value="{scrubDelayMS}"
                stepSize="100"
                change="ToolTipManager.scrubDelay = scrubDelayNS.value" />
    </mx:ApplicationControlBar>

    <mx:Tile>
        <mx:Button label="Button 1" toolTip="Tool tip 1" />
        <mx:Button label="Button 2" toolTip="Tool tip 2" />
        <mx:Button label="Button 3" toolTip="Tool tip 3" />
        <mx:Button label="Button 4" toolTip="Tool tip 4" />
        <mx:Button label="Button 5" toolTip="Tool tip 5" />
        <mx:Button label="Button 6" toolTip="Tool tip 6" />
        <mx:Button label="Button 7" toolTip="Tool tip 7" />
    </mx:Tile>

</mx:Application>

View source is enabled in the following example.