Popa Mihai

The ToolTip control allows you to provide additional helpful information about your interface. When a user moves the mouse over a graphical component like a Button control, you can use the ToolTip control to pop up a text with additional information about the Button functionality.

ToolTips are a very useful way of guiding users through your application.

Most of the times the normal ToolTip might do the job but there are scenarios in which you would want to add more info to your ToolTip controls. In these cases using another Flex control instead of the ToolTip control might prove very useful.

In this example I am using the Canvas mx control as a custom ToolTip. By using a Canvas as a custom ToolTip I am able to make any visual changes to the Canvas, like adding a border around it, making it transparent and setting a corner radius on it.

Custom Canvas as ToolTip in Flex

You can view the working example at the end of this page.

Any Flex container that you use as a ToolTip must implement the IToolTip interface. The IToolTip interface defines the API that tooltip-like components must implement in order to work with the ToolTipManager. The ToolTip class implements this interface.

So after you extend the Canvas container and implement the IToolTip interface you can use the resulting component as a ToolTip.

I created a new custom Flex component in by extending the Canvas container, I named it CustomToolTip.mxml, and I placed it in the default package. Here is the source code for it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	implements="mx.core.IToolTip"
	width="200" height="75"
	borderStyle="solid"
	borderThickness="2"
	borderColor="red"
	backgroundColor="yellow"
	cornerRadius="8"
	verticalScrollPolicy="off" horizontalScrollPolicy="off"
	alpha="0.7">
 
	<mx:Script>
		<![CDATA[
 
			[Bindable] 
			public var mainContent:String = "";
			public var _text:String;
 
			public function get text() : String 
			{ 
				return _text; 
			} 
			public function set text( value:String ) : void
			{
 
			} 
 
		]]>
	</mx:Script>
 
	<mx:TextArea text="{mainContent}" 
		width="200" height="100%" />
 
</mx:Canvas>

This part of the code is required because the component implements the IToolTip interface:

			public var _text:String;
 
			public function get text() : String 
			{ 
				return _text; 
			} 
			public function set text( value:String ) : void
			{
 
			}

Here is the source code for the main application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	verticalAlign="middle"
	backgroundColor="white">
 
	<mx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager;
			import mx.controls.ToolTip;
			import mx.events.ToolTipEvent;
 
			private var tt:CustomToolTip;
 
			private function createCustomToolTip( event:ToolTipEvent ) : void {
				tt = new CustomToolTip();
				tt.mainContent = "this will go insibe the custom canvas component and it will be used as a tool tip";
				event.toolTip = tt;
			}
		]]>
	</mx:Script>
	<mx:Button id="myButton" 
		label="Mouse Over Me"
		toolTip=" " 
        	toolTipCreate="createCustomToolTip( event )"/>
 
</mx:Application>

In the createCustomToolTip function a new CustomToolTip component is created, then the mainContent property is set and then finally the toolTip property is set to the event.

Here is the resulting application:

For more information on working with the ToolTip control check out the online documentation