September 17th, 2007 by Kyle
Posted in: Flex
Here is a simple little demo that shows how to create, style and position a tooltip so it looks like an Error bubble.
This way you can have more than one visible Error Tip visible at once.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" verticalAlign="middle" horizontalAlign="center">
<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
private var errorTip:ToolTip;
private var myError:String;
private function validateEntryA(event:Object):void {
myError="Error A.";
errorTip = ToolTipManager.createToolTip(myError,event.currentTarget.x + event.currentTarget.width,event.currentTarget.y) as ToolTip;
errorTip.setStyle("styleName", "errorTip");
}
private function validateEntryB(event:Object):void {
myError="Error B.";
var pt:Point = new Point(event.currentTarget.x, event.currentTarget.y);
pt = event.currentTarget.contentToGlobal(pt);
errorTip = ToolTipManager.createToolTip(myError,pt.x + event.currentTarget.width,pt.y) as ToolTip;
errorTip.setStyle("styleName", "errorTip");
}
]]>
</mx:Script>
<mx:TextInput id="a" width="100" valueCommit="validateEntryA(event)"/>
<mx:VBox>
<mx:TextInput id="b" width="100" valueCommit="validateEntryB(event)"/>
</mx:VBox>
</mx:Application>
Hopefully this will be useful to some.
Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix2) containing a sample demonstrating the solution described above.
Recent Comments