Simple AS3 ToolTip

Tagged as: ActionScript, Flash

* Edit 11.30.2011 *
- Unfortunately I haven't had any time to update the ToolTip and have received a few generous updates to the class, most recently from Hunter in the comments below, who has also graciously posted his updates to Google code.  I've added everything to GitHub so if anyone feels like forking it please do!  I'm flattered by all the great comments and emails I've received and look forward to any forks that may arise.


Big thanks to John Bailey who has a fantastic post about using the Strategy Pattern to decouple the Tween library from the ToolTip class. He offers a very thorough explanation of what he did and source files to boot. I’m sure this will be a welcome addition for anyone not using the Flash IDE.

Tween Library Preferences and Strategy Patterns

* Edit: 04.29.10*

-Modified draw method to clear the background graphics prior to drawing in the event the tip is re-usable, this should fix the added height bug that was showing up for some.

* Edit: 11.04.09 *

-Added : buffer setting for fields within ToolTip

-Added: bgAlpha setting for ToolTip background

* end edit *

* Edit: 08.27.09 *

-Added the ability to use a StyleSheet.

-Modified the way I was checking for font embedding for the textfields in the ToolTip.  Embeds must be set if you plan to use embedded fonts,  you must specify a font in your StyleSheet or TextFormat if setting either "titleEmbed" or "contentEmbed" to true, there is a working example in the source.  Example:

var tt:ToolTip = new ToolTip();

tt.titleEmbed = true;

* end edit *

I recently had the need to create a fairly stylish, somewhat configurable tooltip for an AS3 project, so I figured I'd share as I couldn't find many freebees out there.  I also needed the ability to provide both a title and a short description with different formats.  This one is pretty straight forward and has a few settable properties.  Here's a rundown of what's available:

  • tipWidth : Number : Set the width of the tooltip
  • tipHeight : Number : Set the height of the tooltip
  • titleFormat : TextFormat : Format for the title of the tooltip
  • contentFormat : TextFormat : Format for the bodycopy of the tooltip
  • stylesheet : StyleSheet : StyleSheet Object ( Added 08.27.09 )
  • titleEmbed : Boolean : Tell the tooltip to use embedded fonts for the title
  • contentEmbed : Boolean : Tell the tooltip to use embedded fonts for the content
  • align : String : left, right, center
  • delay : Number : Time in milliseconds to delay the display of the tooltip
  • hook : Boolean : Displays a hook on the bottom of the tooltip
  • hookSize : Number : Size of the hook
  • cornerRadius : Number : Corner radius of the tooltip, same for all 4 sides
  • colors : Array : Array of 2 color values ( [0xXXXXXX, 0xXXXXXX] );
  • autoSize : Boolean : Will autosize the fields and size of the tip with no wrapping or multi-line capabilities, helpful with 1 word items like "Play" or "Pause"
  • border  : Number : Color Value: 0xFFFFFF
  • borderSize : Number : Size Of Border
  • buffer: Number : TextField buffer inside ToolTip
  • bgAlpha : Number : Transparency setting for ToolTip background

A simple example would look something like:

var tf:TextFormat = new TextFormat();
tf.bold = true;
tf.size = 12;
tf.color = 0xff0000;
var tt:ToolTip = new ToolTip();
tt.hook = true;
tt.hookSize = 20;
tt.cornerRadius = 20;
tt.align = "center";
tt.titleFormat = tf; DisplayObject, "Title Of This ToolTip", "Some Copy below the Title" );

A working example:

[kml_flashembed publishmethod="static" fversion="9.0.0" movie="" width="610" height="400" targetclass="flashmovie"]Get Adobe Flash player


Things of note, I am using an EnterFrame for following the mouse, maybe I should switch to a Timer?  I really never use frame rates below 30, so for me, this isn't much of a factor. I'm handling the MouseOut within the ToolTip, seemed easier that way.

Anyway, without further ado, here are the ToolTip source files used above.

If you run into bugs or have any issues please let me know.



Flash FileReference, Uploading Larger Files, “A script in this movie is causing Flash Player to run slowly”

Tagged as: Flash

I realize my post titles may seem strange but I'm trying to make them as search engine friendly as possible. With the advent of Flash 8 came file uploading capabilities. At the time we really weren't doing anything that had a calling for this lovely new capability. There were instances in the past where it would have been great, we ...

continue reading...



Fullscreen Flash With Browser Scrollbars

Tagged as: Flash, HTML & CSS, JavaScript

Title Edit: 08.22.07. I don't know what I was thinking, initially titled "...HTML Scrollbars", that doesn't make sense. Update: 04.23.08. Working with Matthew Ellis , who commented below, I think we resolved the crashing issue with Firefox / Mac by removing ( commenting the code ) the constant updates sent from JavaScript to the SWF, these ...

continue reading...



Flash CentralDispatcher

Tagged as: Flash

A few recent AS 2.0 projects have drawn the need for a sort of global event messaging system for Flash. Purists may say that's lazy or confusing, 'what if someone else needs to edit your code?' I don't care I tell them! I kid, I kid... I do care, but it is a rare occurrence when someone ...

continue reading...



Is Flash Taking A Back Seat to Flex?

Tagged as: Flash, Flex

It seems pretty apparent to me. What would make me think this dirty thought? Flex, since v2.0 there has been a dot release and 2 hot fixes ( one & two ). The last time there was a dot release or hot fix ...

continue reading...