Simple Usage Example for Flex 2
Updated: May 12, 2008
Views: 6113
Description: This tutorial presents the required MXML to create a simple Tooltip example in Flex 2.
After you have completed installation, use the following MXML file to set up a simple Tooltip example:
This file adds an Image and a Tooltip on the stage. When the application creation is complete, a drop shadow is added to the Tooltip, along with mouse events on the image to show and hide the Tooltip.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:afcomponents="http://www.afcomponents.com/" creationComplete="onCreationComplete(event)">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import flash.filters.DropShadowFilter;
import flash.events.MouseEvent;
private function onCreationComplete(event:FlexEvent):void
{
var filters:Array = new Array();
var dFilter:DropShadowFilter = new DropShadowFilter();
dFilter.alpha = .8;
dFilter.angle = 90;
dFilter.distance = 2;
filters.push(dFilter);
myTooltip.filters = filters;
imgTooltipTest.addEventListener(MouseEvent.MOUSE_OVER, onImgMouseOver);
imgTooltipTest.addEventListener(MouseEvent.MOUSE_OUT, onImgMouseOut);
}
private function onImgMouseOver(event:MouseEvent):void
{
myTooltip.show();
}
private function onImgMouseOut(event:MouseEvent):void
{
myTooltip.hide();
}
]]>
</mx:Script>
<mx:Image x="297" y="116" id="imgTooltipTest" width="130">
<mx:source>http://www.afcomponents.com/components/3d_carousel_as3/img_1.jpg</mx:source>
</mx:Image>
<afcomponents:Tooltip x="135" y="116" shapeStrokeEnabled="false" content="Shake and Bake!" contentType="text" fontSize="12" color="#ff0080" fontFamily="Georgia" textAlign="center" alpha="1.0" id="myTooltip" autoShow="false" drag="true" shapeCornerRadius="5" shapeFillColor="0xFFFFFFEE" shapeFillEnabled="true" shapeStrokeColor="0x000000FF" shapeStrokeThickness="1" contentAutoSize="false" contentHorizonalPadding="2" contentMaintainAspectRatio="true" contentScaleContent="false" contentVerticalPadding="2" tailEnabled="true" tailHeight="10" tailOffset="0" tailPostition="bottom" tailWidth="6"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:afcomponents="http://www.afcomponents.com/" creationComplete="onCreationComplete(event)">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import flash.filters.DropShadowFilter;
import flash.events.MouseEvent;
private function onCreationComplete(event:FlexEvent):void
{
var filters:Array = new Array();
var dFilter:DropShadowFilter = new DropShadowFilter();
dFilter.alpha = .8;
dFilter.angle = 90;
dFilter.distance = 2;
filters.push(dFilter);
myTooltip.filters = filters;
imgTooltipTest.addEventListener(MouseEvent.MOUSE_OVER, onImgMouseOver);
imgTooltipTest.addEventListener(MouseEvent.MOUSE_OUT, onImgMouseOut);
}
private function onImgMouseOver(event:MouseEvent):void
{
myTooltip.show();
}
private function onImgMouseOut(event:MouseEvent):void
{
myTooltip.hide();
}
]]>
</mx:Script>
<mx:Image x="297" y="116" id="imgTooltipTest" width="130">
<mx:source>http://www.afcomponents.com/components/3d_carousel_as3/img_1.jpg</mx:source>
</mx:Image>
<afcomponents:Tooltip x="135" y="116" shapeStrokeEnabled="false" content="Shake and Bake!" contentType="text" fontSize="12" color="#ff0080" fontFamily="Georgia" textAlign="center" alpha="1.0" id="myTooltip" autoShow="false" drag="true" shapeCornerRadius="5" shapeFillColor="0xFFFFFFEE" shapeFillEnabled="true" shapeStrokeColor="0x000000FF" shapeStrokeThickness="1" contentAutoSize="false" contentHorizonalPadding="2" contentMaintainAspectRatio="true" contentScaleContent="false" contentVerticalPadding="2" tailEnabled="true" tailHeight="10" tailOffset="0" tailPostition="bottom" tailWidth="6"/>
</mx:Application>
This file adds an Image and a Tooltip on the stage. When the application creation is complete, a drop shadow is added to the Tooltip, along with mouse events on the image to show and hide the Tooltip.
