Using embedded fonts with tool tips in Flex

The following example shows how you can use an embedded font with an error tool tip 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.

Tagged as: .errorTip, errorString, toolTipShown