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.

5 thoughts on “Using embedded fonts with tool tips in Flex

  1. Boris,

    I haven’t tried it, but I think you may need to extend the mx.skins.halo.ToolTipBorder class, override the updateDisplayList() method, and specify the corner radius in the drawRoundRect() method for the “errorTipRight”, “errorTipAbove”, and “errorTipBelow” skin states.

    Peter

Comments are closed.