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.
https://github.com/duncanreid/ToolTip
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; tt.show( DisplayObject, "Title Of This ToolTip", "Some Copy below the Title" );
A working example:
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.
