Ok, maybe not the first to admit it – quite a few of you noticed the strange wrapping bug when used with short strings, and I recieved many requests to have it move with the mouse, fade-in and out, and even support custom shapes.

Well, now it does all that, and more…
View Demo

Aside from the bug fixes, I added a bunch of new features to improve the tooltip’s functionality, fexibility and general look-feel.

Follow me!
The main feature that everyone was asking for, was to allow the tooltip to follow the mouse. This can now be controlled by setting the following option: follow:true

Distance Control
In addition to being allowed to follow the mouse, the tooltip also allows you to control it’s distance from the mouse, by passing an offset object with the following optional properties in the form of an Object: {x:Number, y:Number, fixed:Boolean}. The default is set to: {x:20, y:25}.
The fixed option causes the tooltip to appear in a fixed location on the stage, instead of relative to the mouse. For example: {x:0, y:0, fixed:true}. This can be handy if you want to simulate a whiteboard or status bar. Note that a fixed tooltip will not adjust to Stage dimensions.

Looking Good…
A number of fixes and new features were added to improve the overall appearance. These include fixing the bug that caused premature wrapping of short strings, a smoother cornering and also the alpha option now only applies to the background, but not the text itself. Passing alpha:0 will even make the tooltip appear entirely without a background – for example, to achieve that whiteboard / status bar effect, combined with a fixed position.
The margins have also been updated, and now apply all around the tooltip, not just left and right. For example, margin:10 will display the tooltip with a lovely wide margin all around it.
Two new formatting options are leading and align. The former allows you to control the line spacing (default is leading:2) and the latter controls the text alignment (defult align:"left").
And finally, if you want to make the lineColor different from the text colour, you can pass a different Color object. For example, color:0x37735B, and lineColor:0x000000,. Will create a tooltip with green text and a black border line.

Fade Animation
Instead of just popping onto your screen, the tooltip can now be animated to fade in and out by setting the fade:Number/Boolean option. By default it’s set to fade:0. Setting it to fade:true will cause the tooltip to fade-in and out, in chunks of 10. Setting it to a number (larger than 0) will change the speed of the animation. For example, fade:20 will speed it up.

All Singing & Dancing Backgrounds
By default, the tooltip Is a square with rounded or straight corners and a drop shadow. But all this can be changed by assigning the bgClip:String option. The string points to a linked library symbol, which can be used as a custom shape, bitmap graphic, a background with a glow effect applied to it (Flash 8 ), or even an animated or scripted movie clip. The new movie clip background will be stretched to the movie clip’s dimensions, but the resulting image can also be controlled in Flash 8 by setting it’s 9Slice grid in the library. If the background clip has ActionScript attached to it, you can pass it the following method: setOptions(options). This passes the entire options object to the clip, and you can then write some more code to make it do even more stuff.
So what else could you possibly need?

Add a Bit of Style…
A custom StyleSheet can be applied to the tooltip in html mode. To remind you, html:true allows the tooltip to be displayed as html. These days, I have the html option permanently on (it can do anything that plain text can do, better…) but I kept it off by deafult, to maining backwards compatibility.
Passing a custom StyleSheet: styleSheet:styleObject allows you to change the look of specified elements, such as hyperlinks, spans and other elements, including the entire tooltip.

For Example:

var style:TextField.StyleSheet = new TextField.StyleSheet ();
style.setStyle(".emphasised", {color:'#37735B',
textDecoration:'underline', fontWeight:'bold'});
Tooltip.show("New options introduced in Version 2 are: lineColor, leading,
align, styleSheet, follow, fade, bgClip and offset,
as well as improved handling of margins\n\nBy embedding the font and setting
the fade option, you can get the tooltip to fade in and out.",
{html:true, font:"Verdana", embedFonts:true, fade:true, lineColor:0x37735B,
 leading:6, align:"right", styleSheet:style,fade:20,
offset:{x:20, y:50}, margin:20})

Enough Already!
So where can you get this Amazing Tooltip?

Download Tooltip Files
View Demo

In my case, it was both. After delving into numerous Internet sources, with some trial and even more error, I finally distilled a solution that, with slight adjustments, works for both JavaScript and Flash.

The basic principle is to trick the browser into thinking that a different image, with a different name, is being loaded. This can be achieved by appending a constantly changing variable into the url of the loaded image:

myImage.jpg?nocache=" + new Date().getTime();

The getTime() method of the Date object returns the number of milliseconds since January 1, 1970 to this date, (or another date specified in the instance). This is perfect for us, because this means that you get a unique number, each time – unless you can refresh faster than a speeding millisecond…

You could also play with the Date object’s methods and exchange getTime() for getHours() or getDate(). This would refresh the images every hour or every day, keeping them in the cache for the current session, which could be useful in some instances.

In JavaScript all you need now is to assign this to the src property of an image, for example:

var cam1 = document.getElementById("cam1");
cam1.src = "../images/cam1.jpg?nocache="
+new Date().getTime();

If you trace out the resulting src or nameProp of the image (I tend to use alerts for this), the returned string will include the url encoding – but will display the correct image, fresh from the HTTP oven.

In Flash you’d use essentially the same syntax, but it’s slightly more complicated. If you attempt to load an image with this url from the IDE, it won’t find the image and will return an error instead. However, it will work fine when embedded in a browser.

To make it work in both, you need to test for the playerType first, before adding the url encoded variable:

var loader:MovieClipLoader;
var viewLoader:MovieClip;
var url:String = "images/catalogue/collection/cat1.jpg";
if (System.capabilities.playerType == "PlugIn"
|| System.capabilities.playerType == "ActiveX"){
      url+="?nocache="+new Date().getTime();
}
loader.loadClip (url, viewLoader);

 

 

This solution is not only limited to images – it can also be used when loading other file types that you wouldn’t like cached, such as XML, SWFs and other files or assets.

View Demo

The tooltip comes in the form of static class methods and does not require any assets on the stage or in the library, as it is created and destroyed on the fly. It needs to reside in your global or local classpath, in a folder structure corresponding to the package com.neoarchaic.ui. After the package has been imported, you create the tooltip simply by calling the static show() method:

import com.neoarchaic.ui.Tooltip;
Tooltip.show(“Hi, I'm the tooltip, see what I can do!”);

And destroy it by calling the static hide() method:

Tooltip.hide();

Calling the Tooltip:

The tooltip methods can be called form anywhere in your ActionScript code, either in your own classes or from the timeline. Normally, you would bind them to an event generated by a button, movieclip, or component, displaying the tooltip on a rollover event and hiding it again on rollout. For example:

button1.onRollOver = function(){
	Toolitp.show(“I’m a simple tooltip”);
}
button1.onRollOut = function(){
	Toolitp.hide();
}

In the following example, the tooltip is bound to the events of a List component. The data property of each list item is used for the tooltip text:

listListener = new Object();
listListener.itemRollOver = function(e:Object){
	 Tooltip.show(e.target.getItemAt(e.index).data);
}
listListener.itemRollOut = function(e:Object){
	Tooltip.hide();
}

list.addEventListener("itemRollOver", listListener);
list.addEventListener("itemRollOut", listListener);

That’s all you need to create a standard tooltip with a yellow background and black verdana font. But your tooltip doesn’t have to be standard at all. There are many ways in which it can be customised, both locally and globally, as shown in the demo.

Customising the Tooltip:

First of all, you can set global options at any time from your code. You can set one or more options at once with the static options property:

Tooltip.options= ({color: 0xFFFFFF, bgColor: 0x37735B,
   font:"_serif", size: 16});

Or one at a time using the method:

Tooltip.setOption("bold", true);

And reset all the global options back to default:

Tooltip.resetOptions();

You can also customise a particular tooltip locally by passing an object that contains one or more options with the show() method. This will override the default or global settings for that tooltip, but will not change any global settings:

Tooltip.show("I'm a tooltip with locally passed options”,
   {alpha: 70, bold:true, color: 0x663333, bgColor:0xFFFFFF,
    size:10, font:"Verdana"});

Here is a list of all the available customisation options:

• delay:Number – delay in seconds (default: 0.5 second)
• width:Number – maximum width of the tooltip window (default: 200px)
• bgColor:Color – Background color of the tooltip (default: 0xFFFFDD – light yellow)
• alpha:Number – Transparency of the tooltip (default: 85)
• corner:Number – The diameter for the rounded corner (default: 5, for sharp corners pass 0)
• margin:Number (default: 2)
• font:String (default: “Verdana”)
• color:Color – Text and line color, can also accept a string hex value (default 0×000000)
• size:Number – Font size (default: 10)
• bold:Boolean (default: false)
• embedFonts:Boolean (default: false)
• html:Boolean (default: false)

The html option is especially interesting, as it allows you the greatest flexibility in formatting your text, as much as the native support of html in flash allows you to do so. This means you can make some text bold and some italic or underlined, display bulleted list items, and even inline images:

Tooltip.show("<p><img src='Internet' width='19' height='17'
   hspace='5' vspace='5'/> With html enabled, you can
   control the display to show inline images, </p>
   <ul><li>List Items</li><li><b>Bold Text</b></li>
   <li><i>Italic Text</i></li></ul>
   <p>Multiple paragraphs, and any html tags <u>natively
   supported</u> by the TextField.</p>" ,
   {html: true, size:12});

To show an image inside a tooltip, you need to include an img tag in your html text, and have it’s src propery pointing to an external jpeg, flash movie, or an internal symbol’s linkage id inside the html text, as shown in the above example.

Examples and Download:

You can download all the source files for the tooltip here. These include the Tooltip class, documentation and demo. This tooltip is currently used by two open source Flash initiatives on osflash.org: Xray (Flash debugger) and Red5 (Flash server). A more customised example can be found on the homepage of a Pediatric Center website in Brooklyn , NY.

A new version of the Tooltip is now available:

Download New Tooltip Files
View Demo

You can still download the old tooltip (version 1), but the new version is fully backwards-compatible.