Flex Hint Bubble Component

Flex makes it very easy to display tooltips associated with buttons, form fields and other interface components in your application. However sometimes a tooltip isn't enough because they only display themselves when a user mouses over a specific button or object. Well what if the user doesn't know where to point their mouse?

For this purpose I created a custom component called a HintBubble. The HintBubble can be triggered by any event using a function called toggleHintBubble. When toggled the Hint Bubble will fly into view displaying whatever hint message you like and then Fade out of view after XX number of seconds have passed. In one of my applications I'm using this remind users of a search button on the screen.

The component is effective for these purposes but could be easily expanded or customized to suit many purposes. Transitions and styles are hard coded but could also easily be customized to suit different needs.

HintBubble.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
backgroundAlpha="0.0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.effects.easing.Cubic;
import flash.events.TimerEvent;
import flash.utils.Timer; 
// duration = Number of seconds to display hint bubble
[Bindable]
public var duration:Number = 4; 
// hintText = Main text for hint bubble
[Bindable]
public var hintText:String;
[Bindable]
// hintTitle = Title for the hint bubble
public var hintTitle:String;
[Bindable]
// leftTo = Left position to move hint bubble to on display
public var leftTo:Number;
[Bindable]
// hintIcon = Icon to use for hint bubble.
public var hintIcon:String;
// Hint Timer Object    
private var hintTimer:Timer = new Timer(1000,duration);
// Initiate function adds event to close hintbubble when timer ends
public function init():void
{
 hintTimer.addEventListener(TimerEvent.TIMER_COMPLETE, closeHintBubbleOnTimer);
}
// opens hint bubble and starts timer   
public function toggleHintBubble():void
{
 hintTimer.reset();
 hintTimer.start();    
  openHintBubble();
 }
 // opens hint bubble without starting timer
public function openHintBubble():void
{
 this.currentState = 'ShowHint';
}
// closes hint bubble without transitions. Returns to base state
public function closeHintBubble():void
{
 this.currentState = '';
}
// closes hint bubble with transition. Resets timer.
public function hideHintBubble():void
{
  hintTimer.reset();
 this.currentState = 'HideHint';
}
// closes hint button from event timer
public function closeHintBubbleOnTimer(event:TimerEvent):void
{
 this.currentState = 'HideHint';
}
]]>
</mx:Script>
<mx:states>
<mx:State name="ShowHint">
 <mx:SetStyle target="{this}" name="left" value="{leftTo}"/>
 </mx:State>
<mx:State name="HideHint" basedOn="ShowHint">
 <mx:SetProperty target="{myHintBubble}" name="visible" value="false"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="" toState="ShowHint">
 <mx:Parallel>
  <mx:Move duration="1250" target="{this}" easingFunction="{Cubic.easeOut}"/>
 </mx:Parallel>
</mx:Transition>
<mx:Transition fromState="ShowHint" toState="HideHint">
 <mx:Parallel>
  <!-- ** After HideHint state completes it's transition state is immediately set to default ** -->
  <mx:Dissolve duration="1000" alphaFrom="1.0" alphaTo="0.0" target="{myHintBubble}"
     effectEnd="this.currentState=''"/>
 </mx:Parallel>
</mx:Transition>
<mx:Transition fromState="HideHint" toState="">
 <mx:Parallel>
  <mx:Dissolve duration="1000" alphaFrom="0.0" alphaTo="1.0" target="{myHintBubble}"/>
 </mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:Canvas backgroundAlpha="0.0" visible="true" id="myHintBubble">
<mx:HBox backgroundColor="#F6E285" cornerRadius="16" verticalAlign="middle"
 borderStyle="solid" borderColor="#FFFFFF" themeColor="#FFFFFF" alpha="0.85"
 paddingTop="20" paddingLeft="15" paddingBottom="15" paddingRight="20">
<mx:Image source="{hintIcon}" scaleContent="true" width="50" height="50"/>
<mx:VBox backgroundAlpha="0.0">
<mx:Text color="#000000" text="{hintTitle}" id="myHintTitle" paddingBottom="-10"/>
<mx:Label color="#000000" fontSize="20" id="myHintText" text="{hintText}"/>
</mx:VBox>
</mx:HBox>  
</mx:Canvas>
</mx:Canvas>

HintBubble Usage Example
To use the HintBubble place the component somewhere in an accessible namespace for your application and place a tag similar to the following in your mxml file.

<HintBubble id="myHint" hintIcon="theme/arrow.png"
  hintText="Click 'Search' to find more products." duration="5"
  hintTitle="Help Tip" leftTo="40" bottom="65" left="1200" />

HintBubble Properties

• hintIcon : An icon to display in your hint bubble
• hintText : Main text of your hint
• hintTitle : Title for your hint bubble
• left : Starting position of bubble ( ideally set somewhere off screen )
• leftTo : Position the hint bubble slides to when toggled
• bottom/top : fixed verticle position of bubble
  
• duration : Seconds to display hint before automatically hiding