The following example shows how you can use an embedded font with an error tool tip in Flex.
Full code after the jump.
<?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.
Hi,
gr8 work!
Is this tool tip created in Flex 2.0 or higher version ?
Regards
Prasad
prasad,
I only tested this in Flex 3.
Peter
Is it possible to draw the errorTip without rounded-corners? Do you have any ideas??
atb Boris
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 thedrawRoundRect()
method for the “errorTipRight”, “errorTipAbove”, and “errorTipBelow” skin states.Peter
Thanks Peter, it’s really incredible how many hours of lifetime i’ll saved with the help of your blog – THANK YOU