This article explains some of the uses, properties, and customisation of the Rich Text Tooltip for Flash (versions 7 and higher). A tooltip can be very helpful for the user interface of applications, development tools, websites, multimedia, interactive maps, and games. It’s a great way to keep your interface free of clutter, and still supply information at a glance about any one of the elements. The demo flash movie shows how the tooltip can be used as it’s own tutorial – just roll over any of the items in the demo to see what the tooltip can do:
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(){
Tooltip.show("I'm a simple tooltip");
}
button1.onRollOut = function(){
Tooltip.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 0x000000)
- 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:
Hi,
I downloaded your .fla file from your site for tooltip… but soon after opening the .fla file in the flash mx 2004 and as i press (ctrl + Enter) for viewing the movie it gives me error :
**Error** Symbol=tree, layer=Layer 2, frame=1:Line 1: The class ‘com.neoarchaic.ui.AbstractComponent’ could not be loaded.
Total ActionScript Errors: 1 Reported Errors: 1
The main error is “The class ‘com.neoarchaic.ui.AbstractComponent’ could not be loaded. ”
May i know why does it happen ?
and
what is the solution to this problem ?
Regards,
vivek
Hi vivek,
Sorry for the late reply, I’ve been away.
AbstractComponent is a leftover class linked to the tree symbol in the library, and shouldn’t have been there. I replaced the tooltip source files, and you shouldn’t have any more problems with that.
Karina
Hi,
Thank you for the work, it works great.
How can i do to make the tooltip follow the mouse when moved over a clip or button ?
I tried with an empty movie clip and its onEnterFrame to pass xmouse to _root.tooltip_mc, but the Tooltip is very far from the mouse 🙁
Thanks in adva
Hi Christian,
You could use onEnterFrame or, even better, onMouseMove to recreate the tooltip each time.
For this to work you need to pass a options object with a delay of 0, which will create it instananeously:
Tooltip.show (“Tip text”, {delay: 0})
… or set the delay globally beforehand:
Tooltip.setOption(“delay”, 0)
Cheers,
Karina
Thx Karina.
I used a addListener for the mouse in my rollOver states and a removeListener for the rollOut, and it works like a charm.
Cool 😉
Christian
Can not get the your demo to work on flash 8 (with flash player 9)
I have it working in Flash 8 with player 8 – I haven’t installed 9 yet. Can you make a barebones example working?
Maybe i did not install the class right. I put the class in the Classes folder in flash.
Thank you for the reply, I’m tring to add the tool tip to a list component that get it data from a flv’s embedded cue point.
Also would you know how to add timecode to a FLVPlayer component?
New to AS!
Mike
Hi Mike,
The class needs to stay inside the package folder structure, as in the example(com.neoarchaic.ui.* = com/neoarchaic/ui on the pc). You can then place that in the classes folder, in the same folder as your flash movie or a central location in your classpath (the flash docs explain how to set that up).
I can’t help you with the time code off hand, but I can recommend the Flash/AS discussion lists on Figleaf (http://chattyfig.figleaf.com/mailman/listinfo/flashnewbie or http://chattyfig.figleaf.com/mailman/listinfo/flashcoders)
Karina
Hi, can i use the component on the tree component?, and how could be the code?
Hi Pablo,
Yes, the tooltip can, and has been, used with a Tree component, all you need to do is capture the itemRollOver / itemRollOut events from the mc or class that contains your tree. It’s similar to what I’ve done for the List component in the demo, so have a look at that.
Cheers,
Karina
hi Karina:
Thank you, problem Solved, great component u have made, i haven’t seen the others but im sure they are great.
as we say here in Mexico
SALUD!
Pablo
Thanks 🙂
Hi, i have a problem i have your component but i cannot use it on the tree component i read what you answered to pablo, but it didn’t work for me, could you help me please?
thank you
Sincerily
Tulio Daza
sweeeet component!
hey i figured out Mike’s problem. I ran into it at first and started wiggin` out because my FUSE and laco’s tween components worked in the same import syntax manner, but Karina’s wouldn’t.
you have to take the tootip.as file OUT of the tooltip folder, and host it inside the “ui” folder.
it worked for me, hope it works for you!
ganbatte!
sweet job karina!
hey Karina,
have you thought about extending the class even more by adding shape parameters in the function?
i’ve been looking into drawing API’s alot. I’m trying to control the shape of the toolTip to modify it into customShapes… there’s some cool stuff formandfunction.com have on API’s…
also have you thought about adding in fadeIn or fadeOut options in the class?
just wondering.
i’ve been having problems with the global properties.
everytime i set global properties with Tooltip.options { etc…
it seems to only pass the color and font properties…but it doesn’t modify the width and the margins seem to be problematic too. anyspace in my input text…and it causes an automatic linebreak. i think it’s wrapping automatically when it shouldn’t be.
anyway, thanks for letting this class out.
alvin
Hi Alvin,
Thanks for your great comments 🙂
Unfortunately, I don’t have time right now to make any changes to the tooltip, except maybe bug fixes. For shapes, you can control it a bit by setting the corner radius, so it can be square or almost round (although I’m not sure what it would look like when round). For truely customised shapes, I suppose it would be easiest to just use a Symbol as a background and stretch it to fit – rather than messing with the drawing API.
Regarding the width and margins, I’ll try and have a look at some point, but do the problems occur ony when setting these globally, or are they ok if you pass them as local parameters? Both should behave the same way, so please let me know.
Cheers,
Karina
Karina I have a question,
When I downloaded your files and opened up the .fla file in Flash 8 Pro and then hit ctrl+enter to view the flash it does not work properly. I checked to see if the demo in the folder was working and it was just fine but when I try to view it after I open the .fla file or publish it, then it wil show everything but no tooltips. Can you give me any reason why this would happen?
hey karina!
thanks for the reply!
the problem happens both with global and local… ii’m guessing it might be because i’m importing multiple classes… ???
i thought it might have been a bitmap font fault, but i tested it with the default options too…and tested it with an aliasable font…
and it still auto-line breaks…
otherwise i have no other clue what’s wrong.
because when i test your toolTip from the sample file it works fine.
when i spotted the problem with the toolTip problem..
i was running your class… in conjunction with:
senocular’s buttonEvent capture class…
laco’s tween class… …
thanks for your time! if you can help me out it’d be awesome!
`arvin
hey dave.
rade my post up above. you need to take the tooltip.as file OUT of the tooltip folder it’s hosted in.
…and have it inside the UI folder!
hope it works!
hey, me again lol
sorry for posting so much.
i tried publishing my movie with the toolTip as a flash 7 swf…. and then
it fixes the bug…
but that won’t help much lol
any ideas on what the dealio is karina?
thanks again!
yeh. i’m tired of myself too. it’s 7:40PM over here in tokyo.
i think when you pass text while publlishing in flash 8…
anything inside the quotes… “this is a toolTip”
it’s going to eat the last string value…hence…
this is a
toolTip
instead of
this is a toolTip.
the small workaround so far i’m using is just to
add one or two extra spaces before and after your block of text…
this is only if your using the toolTip like me for short strings…
“buttons” … “posters”
should be:
” buttons ” ….
” posters ”
sorry!
hope this helps someone!
Hi Karina,
I have donwload the source (zip file). I run Tooltip_demo.swf, it’s worked, then I open Tooltip_demo.fla and press CTL + Enter, the new swf file is created but the tooltip message doesn’t appear, and there’s no error message in output windows. I use flash professional 8, and my publish setting is player 8 , action script 2.0
is it the code have problem with player 8 ?
thanks 🙂
Sorry, I miss Alvin advice in above message, it’s work when I move tooptips.as ..:)
Thanks for the space advice Alvin, that was driving me crazy!
I’m having trouble with getting Christian’s mouse listener suggestion to work. Any advice?
OK, I can get it to work with 0 delay, but is there a way to do this and keep the delay?
You could create the delay in your own code, by setting a delay interval after the rollover event, and calling the tooltip from the delayed function.
Or you could first call the tooltip with the delay, and then set an interval to initiate the mouse listener.
I’ll build this functionality into the tooltip at some stage, but right now I’m just up to my eyeballs with work. I’ll keep you posted about this and any other changes.
hey karina!
back to bother you! (sorry)
is this possible?
if i had an xml node containing some text …
and the node was referenced in an array or var….
could i shoot it into the tooptip.show …rather than inputing the text in AS in quotes?
thanks!
Hi Alvin,
The tooltip accepts a string as a parameter, so all you need to do really is extract the string portion of the xml node, or convert it into a string. If another object type is passed, Flash will attempt to convert it into a string, with varying results.
If your string is an html, you’ll also need to enable the html display for the tooltip (either globally or passing it as a parameter).
I hope this helps you in any way, but I suggest you try to do what you want and see if it works. If it doesn’t, just delve deeper into the node until you get to the string part of it.
Karina
I love this tooltip because it is so flexible. I was trying to make it move when you move the mouse so I inserted this at line 232:
tip.onMouseMove = function()
{
tip._x = _root._xmouse + xoffset;
tip._y = _root._ymouse + yoffset;
updateAfterEvent();
}
It works, however the coordinates aren’t what I expect, so the tooltip is always offset down and to the right. I’ve been messing with this for over 8 hours now and I finally got it to show the tooltip right above mouse like I wanted, but with a catch. As soon as it enters the onRollOver area the first place it draws the tooltip is coordinates 0,0 of the stage. So when you roll over something that has a tooltip it flashes it in the top left before ti draws it in the right place.
I really want to use this tooltip but this is getting frustrating. I just can’t figure out why the coordinates aren’t what I’m expecting them to be. Can you give em any insight on how to make this work?
Hi All,
Sorry about the delay, but the tooltip has finally been updated, overhauled and lots of new features added. The links to the new files & demo have also been updated in the blog post, and I’m currently writing a new entry explaining the new features.
Thanks for bearing with me,
Karina
Hi Karina,
Thanks so much for the Tooltip! I have a question on adding a movieClip symbol as a bgClip.
To do this do I need to change, in Tooltip.as, bgClip:null to bgClip:true ? Then how would I call the movieClip in the line Tooltip.show(“I’m a simple tooltip”); ?
Thanks again,
Scott
Hi Scott,
You don’t need to touch Tooltip.as at all – any property changes should be done from outside of it, by passing the property to the script.
This can be done either locally, by passing the property in the tooltip call:
Tooltip.show(â€I’m a simple tooltipâ€, {bgClip: “MySymbol”});
or globally :
Tooltip.setOption (bgClip, “MySymbol”); //for changing a single property
Tooltip.options= ({bgClip: “MySymbol”}); //for changing one or more properties
– where “MySymbol” is the link name you give your movieclip symbol in the library, after exporting it for actionScript.
Note that if you want to use the movieclip symbol property, and it’s shape is other than rectangle, you might need to tweak some other properties like margins and/or alignment, because other shapes don’t stretch as well as a rect.
Karina