How to make a Facebook like tool tip in Flex?

Couple of weeks ago, I was trying to make a Facebook like tool tip for one of my projects. You can refer to the image below to see which tool tip I mean…

First of all lets take a in-depth look at the tool tip that Facebook has. First it is a rectangle with height of 23 px and in the lower left side of the rectangle is a small arrow or triangle that points to the icon for which tool tip was provided.

Usually when you want to show a tool tip on any component in Flex you can specify it with tooltip=”Tool tip MSG here”. Now we want to use our own tool tip and not the one provided by the Flex framework. So let’s go to work.

As the base of our application we will use the following (icon can be found on this URL https://engineeringtheworld.files.wordpress.com/2010/01/icon.png)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" width="400" height="400">
<mx:Script>
	<![CDATA[
		[Embed(source="icon.png")]
		[Bindable] private var oneIcon:Class;
	]]>
</mx:Script>
<mx:Style>
	Application{
		backgroundColor:#FFFFFF;
		paddingBottom:0;
		paddingLeft:0; 
		paddingRight:0;
		paddingTop:0; 
		borderColor:#333333;
		borderStyle:solid;
		backgroundGradientColors:#FFFFFF, #FFFFFF;
	}
	LinkButton.footerBarLB{
	   cornerRadius: 0;
	   color:#2f2f2f;
	   rollOverColor: #f7f7f7;
	   selectionColor: #f7f7f7;
	   fontWeight: normal;
	}
	HBox.footerBar{
		backgroundColor:#eaeaea;
		borderColor:#c2c2c2;
		borderStyle:solid;
		borderThickness:1;
		borderSides:top, left, right;
		paddingLeft:15;
		horizontalGap:0;
	}
	Text.heading{
		fontSize:14;
	}
	VRule.footerBar{
		strokeColor: #b5b5b5;
    	shadowColor: #ffffff;	
	}
</mx:Style>
	<mx:Text text="Showing how to make Facebook like tool tip" styleName="heading" />
	<mx:Spacer height="100%"/>
	<mx:HBox width="{this.width-30}" id="footerBar" styleName="footerBar">
		<mx:VRule styleName="footerBar" height="26"/>
		<mx:LinkButton icon="{oneIcon}" styleName="footerBarLB" width="26" height="26" />
		<mx:VRule styleName="footerBar" height="26"/>
	</mx:HBox>
</mx:Application>

This code will give us the following result:

This base is intended to simulate the look and feel of Facebook’s tool tip, you will be able to make any kind of tool tip once finishing this tutorial.

Now in you application src folder create a MXML component called fbtooltip.mxml and make it based on Canvas, add the height of 25 px to the Canvas.

You will only need one image for this tool tip to work. And you can download it here:

(https://engineeringtheworld.files.wordpress.com/2010/01/tooltipbottom.png).

We will first add two public variables to the component called: tooltipText of type String and tooltipWidth of type Number, we will also embed the image above which will be representing our arrow of the tool tip.

We now have the following code in tooltipText.mxml file

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="25">
	<mx:Script>
		<![CDATA[
			public var bodyText:String;
			public var toolTipWidth:Number;
			[Embed(source="toolTipBottom.png")]
			[Bindable] private var toolTipArrow:Class;
		]]>
	</mx:Script>
</mx:Canvas>

Note that toolTipBottom.png has to be the name of the image file that you downloaded above, and it has to be inside of src folder of the project.

Now let’s add another Canvas below the script tag. We will assign a background color to the Canvas, it’s height and x and y coordinates.

<mx:Canvas width="100%" height="21" x="0" y="0" backgroundColor="#353535">
	<mx:Text paddingTop="2" text="{bodyText}" id="toolTipText" 
		fontSize="11" fontWeight="bold" color="#f7f7f7" 
		verticalCenter="0" horizontalCenter="0" height="21" 
		fontFamily="Arial"/>
</mx:Canvas>

Inside the Text tag there will be text shown as our tool tip, that is why we bind variable bodyText to the text attribute.

Since this Canvas will be the rectangle of our tool tip we have to make sure we put the image of the arrow just below the Canvas. Since it has a height of 21 px we will set the y coordinate of the image to 21. We also want the image to be moved slightly to the right of the rectangle, thus we put in x coordinate and set it to 10. The source of the image is the embeded icon we declared in the Script tag.

<mx:Image source="{toolTipArrow}" x="10" y="21"/>

Now since we want this component to be shown as a tool tip, we have to do two more things, first we have to add implements=”mx.core.IToolTip” to the component Canvas tag. Second we have to declare two methods, one is get text() , and the second is set text(value:String) and also declare a public variable _text that is of type String.

Now the complete source of tool tip mxml is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="25" width="{toolTipWidth}"
implements="mx.core.IToolTip">
	<mx:Script>
		<![CDATA[
			public var bodyText:String;
			public var toolTipWidth:Number;
			[Embed(source="toolTipBottom.png")]
			[Bindable] private var toolTipArrow:Class;
			public var _text:String;
			public function get text():String {
				return _text;
			}
			public function set text(value:String):void {
			}
		]]>
	</mx:Script>
	<mx:Canvas width="100%" height="21" x="0" y="0" backgroundColor="#353535">
		<mx:Text paddingTop="2" text="{bodyText}" id="toolTipText" 
			fontSize="11" fontWeight="bold" color="#f7f7f7" 
			verticalCenter="0" horizontalCenter="0" height="21" 
			fontFamily="Arial"/>
	</mx:Canvas>
	<mx:Image source="{toolTipArrow}" x="10" y="21"/>
</mx:Canvas>

We will now add import this component to the main application with import tooltipText; right after the beginning Script tag. We will also import mx.events.ToolTipEvent;

Now we have to tell our Application that it has to use our newly created tooltip for the LinkButton in the dock instead of it’s default one. In the main application file we will add a new function, the first argument will be a text that will be displayed as Text in the tool tip, second argument will be event of type ToolTipEvent and the third will be the width of the tooltip.

Inside the function we will first create a instance variable ppt of type footerToolTip (that is the name of our tool tip component), than we will set the variables bodyText and toolTipWidth, at the end we will attach our tool tip to the toolTipEvent with event.tooltip = ppt;.

private function createCustomTip(bodyText:String, event:ToolTipEvent, toolTipWidth:Number):void {
	var ptt:tooltipText = new tooltipText();
	ptt.bodyText = bodyText;
	ptt.toolTipWidth = toolTipWidth;
	event.toolTip = ptt;			
}

Second function that we will create just positions the tool tip at the right spot:

private function positionToolTip(event:ToolTipEvent, x:Number, y:Number):void{
	event.toolTip.x = x+10;
	event.toolTip.y = y;
}

There is only one thing to to, it is to attach these two functions with the LinkButton. The createCustomTip function will be called on toolTipCreate event, the positionToolTip function will be called with toolTipShow. In order for this all to work we also have to add a empty toolTip to the LinkButton with toolTip=” “, note that there is a space in between parenthesis, without the space our tool tip will not show.

<mx:LinkButton icon="{oneIcon}" id="linkOne" styleName="footerBarLB" 
	width="26" height="26" toolTip=" " 
	toolTipCreate="createCustomTip('New FB tooltip', event, 90)" 
	toolTipShow="positionToolTip(event, linkOne.x, footerBar.y-26)" />

Can you believe this, we made our our tool tip, it was not very easy…but still gave us the result we were looking for. One thing to note is that tool tips in Flex have a delay and if we want to show tool tip without this delay we have to declare ToolTipManager.showDelay = 0;. We can put it into the application intialize or creationComplete event. Make sure you also add import mx.managers.ToolTipManager;.

The finished sourcecode is here (main.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" width="400" height="400">
<mx:Script>
	<![CDATA[
	    import tooltipText;
	    import mx.events.ToolTipEvent;
		[Embed(source="icon.png")]
		[Bindable] private var oneIcon:Class;
		private function createCustomTip(bodyText:String, event:ToolTipEvent, toolTipWidth:Number):void {
			var ptt:tooltipText = new tooltipText();
			ptt.bodyText = bodyText;
			ptt.toolTipWidth = toolTipWidth;
			event.toolTip = ptt;			
		}
		private function positionToolTip(event:ToolTipEvent, x:Number, y:Number):void{
			event.toolTip.x = x+10;
			event.toolTip.y = y;
		}
	]]>
</mx:Script>
<mx:Style>
	Application{
		backgroundColor:#FFFFFF;
		paddingBottom:0;
		paddingLeft:0; 
		paddingRight:0;
		paddingTop:0; 
		borderColor:#333333;
		borderStyle:solid;
		backgroundGradientColors:#FFFFFF, #FFFFFF;
	}
	LinkButton.footerBarLB{
	   cornerRadius: 0;
	   color:#2f2f2f;
	   rollOverColor: #f7f7f7;
	   selectionColor: #f7f7f7;
	   fontWeight: normal;
	}
	HBox.footerBar{
		backgroundColor:#eaeaea;
		borderColor:#c2c2c2;
		borderStyle:solid;
		borderThickness:1;
		borderSides:top, left, right;
		paddingLeft:15;
		horizontalGap:0;
	}
	Text.heading{
		fontSize:14;
	}
	VRule.footerBar{
		strokeColor: #b5b5b5;
    	shadowColor: #ffffff;	
	}
</mx:Style>
	<mx:Text text="Showing how to make Facebook like tool tip" styleName="heading" />
	<mx:Spacer height="100%"/>
	<mx:HBox width="{this.width-30}" id="footerBar" styleName="footerBar">
		<mx:VRule styleName="footerBar" height="26"/>
		<mx:LinkButton icon="{oneIcon}" id="linkOne" styleName="footerBarLB" 
			width="26" height="26" toolTip=" " 
			toolTipCreate="createCustomTip('New FB tooltip', event, 90)" 
			toolTipShow="positionToolTip(event, linkOne.x, footerBar.y-26)" />
		<mx:VRule styleName="footerBar" height="26"/>
	</mx:HBox>
</mx:Application>

Here is the complete code of tooltipText.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="25" implements="mx.core.IToolTip" width="{toolTipWidth}">
	<mx:Script>
		<![CDATA[
			public var bodyText:String;
			public var toolTipWidth:Number;
			[Embed(source="toolTipBottom.png")]
			[Bindable] private var toolTipArrow:Class;
			public var _text:String;
			public function get text():String {
				return _text;
			}
			public function set text(value:String):void {
			}
		]]>
	</mx:Script>
	<mx:Canvas width="100%" height="21" x="0" y="0" backgroundColor="#353535">
		<mx:Text paddingTop="2" text="{bodyText}" id="toolTipText" 
			fontSize="11" fontWeight="bold" color="#f7f7f7" 
			verticalCenter="0" horizontalCenter="0" height="21" 
			fontFamily="Arial"/>
	</mx:Canvas>
	<mx:Image source="{toolTipArrow}" x="10" y="21"/>
</mx:Canvas>

Advertisements

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: