Problem
You want to use an embedded font with a Flex tool tip or error tool tip.
Solution
You can embed the desired font using an <mx:Style /> block, and then specify the embedded font family name in the fontFamily style on the .errorTip selector. Next, set the errorString property on the desired component which will set the error tool tip. Finally, we use the toolTipShown event to reposition and rotate the error tool tip.
Detailed explanation
The following example shows how you can use an embedded font with an error tool tip in Flex.
<?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 {
border-style: "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>
For more information, see "Using embedded fonts with tool tips in Flex" on flexexamples.com.
Report abuse
