Popa Mihai

PopaMihai.com – Flex, Flash, AIR and ActionScript articles and tutorials

Customizing the mx ToolTip Control in Flex

2 comments

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.

In this example I will show you how to apply different styles to a ToolTip control using CSS.

This is how your custom ToolTip will look when all the styles have been applied:

Custom Flex ToolTip Control

Custom Flex ToolTip Control

You can find the working example at the end of the page.

This is the code behind the application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	verticalAlign="middle"
	backgroundColor="white" 
	viewSourceURL="srcview/index.html">
 
	<mx:Style>
		.customToolTipStyle {
			background-color: #a2a1c5;
			color: #9c0606;
			font-weight:bold;
			padding-bottom:15;
			padding-left:15;
			padding-right:15;
			padding-top:15;
			corner-radius:8;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager;
			import mx.controls.ToolTip;
 
			private var tt:ToolTip;
 
			private function createToolTip( event:MouseEvent ):void{
				tt = ToolTipManager.createToolTip("Here comes my custom tool tip text",
													event.target.x +  event.target.width, event.target.y ) as ToolTip;
				tt.styleName = "customToolTipStyle";
			}
 
			private function destroyToolTip( event:MouseEvent ):void{
				ToolTipManager.destroyToolTip( tt );
			}
		]]>
	</mx:Script>
 
	<mx:Label text="Move the mouse over the buttons to see the tool tip" />
 
	<mx:Button label="Default tool tip" 
		toolTip="This is the default tool tip" />
 
	<mx:Button label="Custom tool tip"
		rollOver="createToolTip( event )"
		rollOut="destroyToolTip( event )"/>
 
</mx:Application>

On the second button I added two event listeners for the MouseEvent.ROLL_OVER event and for the MouseEvent.ROLL_OUT events – createToolTip( event ) and destroyToolTip( event );

The createToolTip( event ) creates a new ToolTip by using the ToolTipManager.createToolTip() method, then applies the custom style for the newly created ToolTip

tt.styleName = "customToolTipStyle";

In the Style declaration part of the application I declared a few styles for the TooTip like background-color, font-weight and padding

Here is the final working application:


View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.

Written by Popa Mihai

December 6th, 2010 at 12:37 pm

Posted in Flex,Skinning,Styling Components

Tagged with , , , , ,

«
»

2 Responses to 'Customizing the mx ToolTip Control in Flex'

Subscribe to comments with RSS or TrackBack to 'Customizing the mx ToolTip Control in Flex'.

  1. Hi Achim,

    I think the problem can be solved if you use a custom component as a ToolTip. I made a quick example that you can check out here.

    The idea behind this is that once you have the custom Canvas component that you can use as a ToolTip, you can customize it in anyway you want.

    Hope this helps.

    Cheers,
    Mihai

    Popa Mihai

    8 Feb 11 at 7:58 pm

  2. Thanks for the Tip, but theres one big problem: You can style the border, the colors and so on, but you can’t resize the fontsize. If you put it on 12 / bold and write a little more text than normal, you will see that the text is cut -.-”

    do you have any idea how i can set the style while creating the tooltip?

    best regards

    Achim

    8 Feb 11 at 10:00 am

Leave a Reply