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:

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.

Posted by CristianDuro on November 20th, 2008 at 8:24 am

Wow! Terryfic class!! xD

I was looking for a decent as3 tooltip class and is true that there’s no many freebees out there…

I only have 1 problem…When I try to change the ‘Georgia’ font with other one…THE TOOLTIP SHOWS NOTHING…I mean, I think it’s only possible to embed system fonts…agree?

Well, thank u so much 4 the class, good job, man! LOL

Posted by Duncan on November 20th, 2008 at 11:46 am

Good catch Cristian. I always forget the new way on adding a font to a TextFormat. Modified the lower middle ToolTip to use the Impact font, added the Impact font to the library with ‘impact’ and adjusted the code around line 55:

var font:impact = new impact(); //font in library
tf.font = font.fontName;

Updated the files, can you give it another try when you get a chance and let me know if that works for you?

Posted by JG on February 5th, 2009 at 3:09 pm

I am trying out the attached code and I keep getting an error on the TweenEvent – Type not found or was not a compile time constant on line 278. I am new to Flash/Flex/AS3 so I am kind of stuck. I feel like I am missing the TweenEvent lib or something. Any thoughts?

Posted by JG on February 5th, 2009 at 3:24 pm

Ok, I figured out that I need to have Flash CS3 to use the Tween classes. I am using Flex Builder 3. I figured someone else might make the same mistake and this will save some them some time.

Posted by Jared on February 8th, 2009 at 12:47 am

This is awesome! Helps me out a lot. Thanks!

Posted by Garth on March 5th, 2009 at 1:19 pm

Nice job! Easy integration and customization

Posted by gzzle on March 26th, 2009 at 9:45 am

Hi! Nice job!!!!!! Looks great, but I’ve got a question….

I took your code just to try it out and it works perfect..
But I’ve tried to put a movieclip into the tooltip.. It doesn’t work.. at least not the way I tried… How whould you do it??

Posted by rika on May 15th, 2009 at 4:10 am

Hi Duncan, thanks so much for posting this, it’s great! I’d very much like to have an outline on the tooltip. How would I go around adding that to the script?
Thanks in advance

Posted by Duncan on May 15th, 2009 at 3:18 pm

Hi Rika,

I’ve added “border” and “borderSize” to the class for you. border is a number color value ( 0xFF0000 ) and borderSize is also just a number to set the line thickness.

Hope this helps some.

Posted by rika on May 16th, 2009 at 9:18 am

That is so cool! Thanks :) :)

Posted by Hernan on June 9th, 2009 at 3:04 pm

Hey Duncan very neat Class love it …
I got a question …. there is anyway that you could set up the height of the box ?
the same way that you can right now set up the width ?

Thanks

Posted by Duncan on June 9th, 2009 at 3:50 pm

Hi Hernan,

I added “tipHeight” to the class for you, typed as Number. Hope this helps some.

Posted by Hwang on June 9th, 2009 at 5:35 pm

Nice stuff, but any way to disable the title or content?
And be able to adjust the position of the hook rather than always at the bottom?

Posted by Hwang on June 9th, 2009 at 5:44 pm

and I’m not sure whether is it just me.
sometimes when i keep rolling over to show the tool tips, it keeps adding my content?

Posted by Hernan on June 9th, 2009 at 7:26 pm

Hey Duncan Thanks a lot, but I tried to put that property and didnt work out … I checked the class it self and I didnt see “tipHeight” defined anywhere … so when I tried to compile it gives me an error. typical one when you dont have something define …. btw I did download the latest version which say “tt-06-2009.zip” Thanks

Posted by Duncan on June 9th, 2009 at 11:13 pm

@Hwang: If you leave out the ‘content’ it will only use the title, there is an example in the .zip and in the swf above. Right now the hook is stationed at the bottom, if I find some time I will look into moving it around along with the Tooltip depending on where the mouse is in comparison to the object you are rolling over. I haven’t experienced the adding content bug your mentioning but if you can send me a sample i’d gladly take a look for you.

@Hernan: I think WordPress is caching files or something, please try to download it again, I just did and everything worked. If your still having difficulty please send me an email and i’ll send the files to you directly.

Posted by Hernan on June 10th, 2009 at 6:03 pm

Hey Duncan Thanks that worked …… I got question … check this out this is what Im working on …. http://www.elasticcreative.com/beta/#/work/

if you click one of the thumbs then if you go to the right of the video or left you will see a left and right arrow … as you can see your tooltip class works perfect …. what is happening is when you rollover you see what is coming next (next video)… if you click it takes you to the right video …. but the thumbs doesnt change (or update) I need to rollout and rollover again for the text to update …. there is anyway that the text could change on the fly? Im loading the text through XML btw …. let me know what you think …. thank you .

Posted by Duncan on June 11th, 2009 at 10:42 am

Hi Hernan,

Update: added “setContent” method, parameters: title, content… content is optional. Example in the source and in the swf above ( click large circle on the left ). Hopefully this will help some.

Posted by Jeff on June 13th, 2009 at 8:11 pm

Duncan, thank you! This really helped me out alot. Great job [high five].

Posted by Kaolin Fire on July 12th, 2009 at 11:13 am

Brilliant. And very easy to swap out for caurina Tweener–

private function animate( show:Boolean ):void {
var end:int = show == true ? 1 : 0;
Tweener.addTween(this,
{
alpha: end,
time: .5,
transition: “easeOutQuint”,
onComplete: function():void {
if (!show) onComplete();
}
}
);
}

private function onComplete():void {
this.cleanUp();
}

Posted by daniel h. olivau on July 17th, 2009 at 10:15 am

Thanks very much. Thanks for share. From Argentina, Daniel.

Posted by nick roy on July 20th, 2009 at 11:58 pm

Hi Duncan
(sorry for my average level of english :) )
your work is terrific !
I’m actually working on an interactive map
and I am using your tooltip within each section of the map and it is working perfectly …

I am a noob on as3 and I try to learn by myself.

I was wondering if it could be possible to input some text in the tooltips from an external file like a xml based one ?

ok, I should deliver some explanations there:

you define a variable from one xml file like:

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

var xml:XML;
function onLoaded(e:Event): void { xml = new XML(e.target.data);
loader.load(new URLRequest(“suissedata.xml”));

and once it’s done, you put the value here

_reusableTip.show( movieclipname, xml.texte1, xml.texte1 );

I think it could add a more powerfull level to it.

Let me now if it is possible :)

and again thx for your great job !!!

Posted by Rich on July 23rd, 2009 at 10:07 am

Great work Duncan – just one observation: when you quickly roll over / out of display objects with tooltips, the tooltip does not seem to show. Any ideas why? If you then rollover the object again, it pops up as expected.

Posted by Eliad on August 12th, 2009 at 1:50 pm

Hi Duncan.
very very nice work! your class helps me a lot. I am experiencing only one problem with it.
when i would like to associate a tooltip with a movieclip that appear on stage later in the timeline (not at the beginning of the movie) I get and error message and the tooltip will not work..
any advices?
thanks

Posted by Charles on August 16th, 2009 at 12:56 pm

Thanks for posting this Duncan.

Posted by Duncan on August 17th, 2009 at 10:55 am

@Eliad,

It sounds like your trying to use the tooltip with a movieclip that is not yet available on the timeline. If that is the case it will not work, it would be similar to trying to add MouseEvents to a movieclip that is not available on the timeline. You will need to add the tooltip in a frame that holds that specific movieclip.

If this is not the case please send me a sample file so I can see what the problem might be.

Posted by Kevin on August 25th, 2009 at 10:16 am

Hi Duncan,

Love the tool tip it was exactly what I was looking for, the only thing I would like to do is leave out the title and have just the body copy. At this moment the only way to do that is to pass the title the value of ” “. This of course makes no title, but leaves the empty white-space where the title would be located. Is there a way to do this so that only the body copy shows without the wasted white-space at the top? Do I need to recode the addCopy function to make this work for me?

Posted by Kevin on August 25th, 2009 at 10:19 am

I also forgot to ask, is there a way to bring in htmlText formatting for the tooltip. My project uses a CSS file to update the text in the file and I would like to continue to use it for tootip so I don’t have to embed a font file and then have to embed a new one if the font changes in the future.

Posted by Duncan on August 28th, 2009 at 11:07 am

Hi Kevin,
You should be able to set a title only, if you negate the content or 2nd parameter it will be ignored. I’ve added the ability to use a StyleSheet. Font embedding now must be set on the tooltip if you plan to embed fonts, you can set the ‘title’ and ‘content’ fields separately using ‘titleEmbed’ and ‘contentEmbed’.

Notes, embedding fonts with TextFormat is pretty straightforward, you use the Class Name of the font in your textformat, for example, var tf:TextFormat = new TextFormat; var font:MyFontClassLinkageName = new MyFontClassLinkageName(); tf.font = font.fontName. When using a StyleSheet I found that while you still create a font symbol in your library the Class Linkage Name is irrelevant as you must use the actual name of the font. I haven’t used stylesheets for quite some time and I don’t remember having this issue in the past so I’m not sure if it’s a CS4 thing or not.

Posted by Andrew on September 18th, 2009 at 5:33 am

This is brilliant – thanks so much. I’m a well below average Flash user and even I made it work.
Just one thing – when I use tipHeight and have I have only a title and no content, the text appears below the bubble.

Posted by Andrew on September 18th, 2009 at 5:41 am

UPDATE:
Sorry-it’s not to do with the lack of content.
tip_height seems to adjust the height of the background but it doesn’t re-align the text to match.
Also is there an easy way to adjust the alpha? I managed to change it by changing the alphas variable in the class itself, but is there an easier way?

Posted by max on September 23rd, 2009 at 12:28 pm

In your source files how does the .fla relate to the Application.as file?? There appears to be no actionscript at all in the fla.

Looks really good though, just need to work out how to use it :)

Posted by Duncan on September 23rd, 2009 at 3:44 pm

Hi Max,

The Application.as file is just a Document Class, if you look at the properties tab, under publish, you’ll see “Application” in the “Class” field, this just tells Flash to use Application.as as it’s document class. The Document Class is just a class that kind of represents the main timeline. You could rip the code out of the Application.as file and put it on the first frame if you wanted to. I just prefer external editors over the internal ActionScript panel. There is an informative, maybe a tad bit long, video here:
http://www.gotoandlearn.com/play?id=43

Posted by Geoff on October 3rd, 2009 at 9:28 pm

Great stuff! Just what i was looking for, and suits my needs perfectly. Thanks dude

Posted by Eric on October 12th, 2009 at 2:12 pm

This is great, and very time-saving. I noticed another post that had no answer, the height property thingie doesn’t realign the text. Easy fix for this?

Posted by nandita Gharat on October 22nd, 2009 at 4:06 pm

Hi
thanks for posting your files and info..I’m still new to the world of as.3, and this is helpful. thanks again

n

Posted by Dave Bleeker on November 2nd, 2009 at 10:11 am

Hi, quite funny, I experienced exactly the same about 2 months ago when working for a project and I came up with a solution very much like this one:

http://detailed-simplicity.xs4all.nl/ds2/?id=71

Posted by Duncan on November 4th, 2009 at 12:45 pm

Nice work Dave!

I worked with Andrew above and added in ‘buffer’ and ‘bgAlpha’ settings. If someone can give me a use case scenario for setting the height and making the width conform I’d be willing to give it a shot. As it stands, it makes sense to set a width and have the height conform based on the amount of text. Would a setting like “lockWidth” or “conformToWidth”, which would default to true, be appropriate? In the event it was set to false, it would use height as it’s base to conform to while adjusting the width?

Posted by NuttyMonk on November 4th, 2009 at 2:50 pm

Hi Dave.

Loving this ToolTip.

Would there be any chance of adding in some additional functionality to the autoSize settings?

I’d like to be able to keep one of the dimensions the same and have the other one autoSize.

Also, another idea i just had would be too keep the tooltip square or have a particular dimension ratio (e.g. 4:3, 2:1) and have the tooltip resize to fit the text that is in it by using that ratio.

Thanks again for this wonderful bit of code.

Cheers

Posted by Duncan on November 8th, 2009 at 11:06 pm

Ok, I’ll add this in, won’t be immediate unfortunately, swamped at the moment between day job and freelance, but I will definitely get to it.

Posted by Dave Bleeker on November 15th, 2009 at 11:31 pm

Hi all,

Thanks for the interest, I’m glad it has been of value. I have been busy on a new project lately, so sorry for the late reply.

A fixed width does make sense indeed, so i have posted an update, where the tooltip’s height is calculated based upon it’s width, if a property “tooltipWidth” is set. If “tooltipWidth” is not set (or results in isNaN), the tooltip will use it’s autoSize.

I have noticed, when using a fixed width, the line breaks may look a bit dodgy sometimes, therefore you might want to set it’s text align to justify.

I added an example and it can be download here: http://detailed-simplicity.xs4all.nl/ds2/?id=71

Posted by guido on November 17th, 2009 at 6:01 am

hi Duncan. I am using CS3 and could not open the FLA so I created a basic fla myself and defined Application as document class. When publishing I see a lot of errors regarding “levels”. Any idea what this could be ?
Thx
here is an excerpt of the message : 1120: Access of undefined property level1.

Posted by guido on November 17th, 2009 at 6:57 am

Duncan,

could get it to work…. the levels were actually the MovieClips.
Nice class I have adapted for my app,
Thx

Posted by Mihai on December 13th, 2009 at 3:45 pm

Hy Duncan

Great class , im currently using it on a project and i have a little problem :

Im trying to make a photo gallery and i want 2 things done with the tool tip :
1. when the cursor is on the picture it should say : ” click for info ”
2. when the cursor is anywhere BUT the picture is should say : ” close ”

The first part was not a problem but the second one doesn’t seem to work very well .

Here is the code im currently using for this :

if (full_mc.hitTestPoint(mouseX, mouseY, true)) {
tt.show(full_mc,”Click for Info”);
} else {
tt.show(stage,”Close” );
}

“tt.show(stage,”close” ) works, but only when im over some other movie clips that are on the stage , when there cursor is not pointing anything ….well it doesn’t show anything .

Any ideas on how to make this work ?
A shorter version of my problem is : can i make the tool-tip visible all the time regardless of the display object ?

Thanks
Mihai

Posted by DrChong on December 17th, 2009 at 5:33 pm

Great tooltip! Thanks for sharing!

Posted by Nigel on December 21st, 2009 at 6:46 pm

Awesome work dude. Thankyou.

Posted by Erica on January 8th, 2010 at 8:15 am

Duncan,

I was able to get the tooltip to work and styled the way I wanted. Locally on my machine it was great, however when I upload to my server, the tooltip stopped working. I have the “com” folder uploaded and the separate “application.as” file both uploaded to the root.

For the life of me I can’t figure out what’s happening. It’s like the swf isn’t reading the AS file nor COM folder at all. I am new to AS3. maybe I’m doing something wrong.

Also when you rollover the tip “15″ times or so, then roll out of the flash, the last state of the tooltip stays visible (when it should go away). My project is a image grid of 6 images, where each image has a tooltip.

Posted by Jort on January 12th, 2010 at 9:58 am

This was exactly what i needed!
Did some tiny changes to make it work in FlexBuilder3
Thanks a lot!

Posted by John Bailey on January 12th, 2010 at 6:21 pm

Would you be interested in letting me do a branch from this using a Strategy Pattern for Tweening?

This would allow people use whatever Tween Lib they want and do even more advanced Tweening without having to extend your class.

What do you think?

Posted by Steve Barrett on January 18th, 2010 at 2:10 pm

Just wanted to add more thanks for this wonderful class! Its versatility is truly impressive.

Posted by Liluc on February 4th, 2010 at 10:59 am

Thanks for sharing !

Posted by Ethan Za Batousai on March 3rd, 2010 at 8:27 pm

Nice work mon! Took me a while to craft it to my needs but everything on your end was very well done.

Thanks!

Posted by Vivian on March 4th, 2010 at 5:18 pm

very nice work… thanks a lot for sharing and save my day…. :)

Posted by Pierre Frumillon on March 9th, 2010 at 4:50 am

Thanks a lot. Great Job

Posted by Dan on March 23rd, 2010 at 1:36 pm

Awesome, thanks for this class :) great stuff.

There is a bug however (as mentioned by Hwang early on). If i use a reusable tooltip (IE. dont create a new() tooltip on each mouseover event) then it keeps adding carriage returns to the label so i end up with a very high tooltip, happens very often with closely placed objects. I tried adding ‘cleanUp()’ to the start of the show() function, but that made the tooltip bg dissapear.

I dont like the idea of having to create a new tooltip on every rollover, uses lots of mem and makes it harder to just define the tooltip style once and reuse it all throughout your code

Posted by Dimitree on March 30th, 2010 at 3:29 am

Great class indeed! How is it possible though to be able to set the text inside the Tooltip in Greek characters?

Posted by Rick on April 1st, 2010 at 11:51 pm

Interesting, yet confusing. It would be easier if you can explain the process step by step. I am recently using Flash, and I am still having trouble creating the tooltip.

Posted by Duncan on April 2nd, 2010 at 12:37 am

I apologize for my delayed reaponse, I’m incredibly swamped at the moment.

@Dan, if you could send me a simple example I sure would appreciate it.

@Dimitree, as this is something I have not tried I cannot say for certain, although if you embed the font I don’t see why not.

@Rick, there are multiple examples included in the zip file. This is for ActionScript 3.0 only, I have a comment above explaining the use of the Document Class or Application.as file and a link to video that explains it in more detail.

Posted by Dimitree on April 15th, 2010 at 5:03 pm

@Duncan. Unfortunately it doesn’t work properly although I imported the font in the library
I get a something like a “white rectangle” inside the tooltip instead of my text.
If you can find a solution please notify.
Thanks in advance

Posted by Andy Dust on April 27th, 2010 at 6:07 am

Hi Duncan,

Fantastic script! :) I’m working with the flex sdk but it was very easy to swap in the TweenLite library in place of flash’s Tween.

I am also encountering @Dan’s problem in that the tooltip needlessly increases in height if you trigger the show action in quick succession.

The issue appears to occur when show() is triggered whilst the fade transition is still in progress.

Specifically, when this happens the value from getBounds (used during drawBG) can incrementally increase, possibly due to how you are using mouse coordinates/Point to position/reposition the tooltip.

Hope this helps!
Andy :)

Posted by Andy Dust on April 27th, 2010 at 6:25 am

Ah I think I’ve got it. If show() is triggered again before cleanUp() is called, then bounds.height returns a value that includes the previously added buffer. The drawBG method then proceeds to add more buffer.

One possible fix would be to change your use of getBounds to this:

this._contentContainer.getBounds( this._contentContainer );

Andy.

Posted by Duncan on April 29th, 2010 at 11:34 am

@Andy, thanks for the help. I’ve made a couple adjustments, mainly clearing the graphics prior to drawing in the event you are using a re-usable tip, this seems to take care of the extra height that was added if your roll in and out quickly enough. I’ve also modified the animate method to stop the tween in the event you are rolling on and off the object rapidly so it won’t blink.

@all, As per Andy’s previous comment about using a different Tween engine, this was something that had crossed my mind initially when I created this but I never really put much thought into it beyond using the built in Tweening methods that were in Flash to make it more generic and easy to use. On that note and very delayed on my end, John Bailey 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. I’m sure this will be a welcome addition for anyone not using the Flash IDE.
Tween Library Preferences and Strategy Patterns

Posted by Jonnie P on May 21st, 2010 at 3:39 am

Thanks for this script! But what does the number on the top left side mean and how do I get rid of it from displaying?

Posted by Nat on May 27th, 2010 at 12:51 am

Thanks for creating this. It’s great!

I can’t seem to remove the number at the top left either.

Any suggestions?

Nat

Posted by Duncan on May 27th, 2010 at 9:54 am

The number in the top left is mainly for testing, I wanted to make sure it wasn’t eating memory. If you comment “this.debug();” around line 95 in Application.as it should go away.

Posted by Jose on May 27th, 2010 at 10:13 pm

Hi Duncan, This is awesome! Quick question How do I import this if I can’t use it as a class?

My file is using another class, so I tried to import it using:
import src.Application;
var myApplication:Application = new Application();

however I get an error: undefined property level 1. but I do have and MC with the instance name level1.. If I can’t import the file.. what part of the Application.as should I cut and paste in my fla?

Thanks for you help!

Posted by Jonnie P on May 28th, 2010 at 4:52 pm

Thanks Duncan!

Posted by Randall on June 6th, 2010 at 9:58 am

Is it this possible to be compiled in flex sdk 3? because I’m getting an error TweenEvent not found.

Posted by droope on June 28th, 2010 at 1:54 pm

Thanks! Great :D

Posted by jacs on June 30th, 2010 at 12:06 pm

excellent man!!! you rocks!!!!!!!!!!!!! :)

Posted by Tom on July 14th, 2010 at 7:10 am

Hi
I have downloaded it but there are some problems with encoding (8Bits/utf-8) on Flash and FlashDevelop. For example:

5ú˘aÓďŃŰÔgőńŁł˛˙•xß®xS“÷l-

Any guess why?

Posted by antonio brandao on July 15th, 2010 at 7:24 am

great class, thanks for sharing

the cleanUp function gave me an error, in the following line

this._tf.filters = [];

so I prevented it using this

if (this._tf.filters != null) { this._tf.filters = []; }

Posted by Sylvie on July 16th, 2010 at 4:44 am

It’s great ! Thanks ^^

Posted by Jefferson on July 16th, 2010 at 12:41 pm

Joyous day Duncan, I sure hope you or someone here can help with your wonderful Tooltip. I am rather new to Flash, so please assume I know next to nothing when you describe exactly what I should do at each step.

I want to use your tooltip source files with CS5 to add the tooltip(s) to my existing main movie/fla. I simply do not know exactly where to put what…and how (on some items).
So…. from your source files:
com folder
tt.swf
Application.as
tt.html
styles.css
and
AC_RunActiveContent.js ….
where do I start, and where should each of the above files go?
Step-by-step… which frame(s), which actions go where, which of the source files need to be added to my main movie’s Library… just step-by-step how someone can add your wonderful tooltip to an EXISTING fla/movie?

I have tried with other as3 tooltip components etc. without any luck.
Please, I hope either you Duncan or someone else here can please take me step-by-step to add at least one tooltip to my existing movie using your files/coding.
Please advise… thanks… Jefferson

Posted by Jefferson on July 19th, 2010 at 9:03 am

Anyone….. please…. on the detailed step-by-step request above?
Thanks…. Jefferson

Posted by Gurpreet Hanjra on August 6th, 2010 at 7:12 am

Very useful piece for code!
Thanks!
- Gurpreet Hanjra

Posted by Andrea on August 18th, 2010 at 8:12 am

This is a great piece, many thanks as I am just starting to learn about CSS and Flash in my new job. This gives me something to work on in the evenings.

Thanks.

Posted by Daniel on November 28th, 2010 at 4:56 pm

There seems to be an issue with using a single reusable tooltip, the tooltip won’t reappear if you hover another object while it’s still fading in/out.

The only fix is to create a brand new tooltip for each element, which can needlessly lengthen the code when you have a lot of objects using the same tooltip style.

Posted by Eder Lima on December 17th, 2010 at 12:34 pm

Thank you man! I was lokking for some tooltip classes and found your blog. nice work!

Posted by Justin on December 27th, 2010 at 11:58 pm

Good job! Thanks~

Posted by Philip on February 11th, 2011 at 8:25 am

Hi….this stuff is great!.. Thanks for all of this.. I need to ask you something..

I need to change the space between the Title and the body of the tooltip… i want to make the gap between a bit bigger… how can i manage that?

Thanks

Posted by Henry on April 20th, 2011 at 12:02 am

THIS IS AWESOME! just what i been looking for over a week!

Posted by Ressources pour webmasters | Flyers Blog on May 13th, 2011 at 4:59 am

[...] Simple AS3 Tooltip : Petite classe permettant la création de tooltips simplement. [...]

Posted by Nayan on May 14th, 2011 at 2:52 pm

You have done a great job in creating this class Duncan… Thanks a million!

Posted by Nayan on May 14th, 2011 at 3:00 pm

Duncan,

I am working on creating an interactive map. And in that i want to include some more things including the title & content.
The show function is currently taking 3 parameters…

function show( p:DisplayObject, title:String, content:String=null ):void

But would it be somehow possible to add more string parameters… so as to show some more information in the tooltip…

Also to add… I have also seen in some sites they were able to display images in the tooltip… would it be possible here? Coz that would make the current version more useful and interactive…

Thanks for the help
Kind regards
Nayan

Posted by znttt on May 17th, 2011 at 9:37 am

Hi, thanks for the code, just what i needed. I have created the swf file i need but i have problems getting it to work when i have uploaded it to my website. Locally on my machine it was great, however when I upload to my server, the tooltip stopped working. The picture i put in shows up but there are no tooltip showing when i move the mouse over the picture on the website. I have the “com” folder uploaded and the separate “application.as” file both uploaded to the root.
Any idea what i have done wrong?

Posted by arne on June 19th, 2011 at 11:33 am

Thank you for the code – You make my day easier

Posted by Damo on August 30th, 2011 at 10:10 am

I know it’s three years on but this is a great little class and came in very useful.
Thank you

Posted by patrik on September 12th, 2011 at 9:58 am

Awesome! Thank you very much.

Posted by bonham on October 9th, 2011 at 3:23 pm

A tutorial please?
I need these stuffs on my thesis entitled philatlas, An online atlas that contains information about the Philippines. I need this, when I hover each province, it will pop some short information. THANK YOU in advance for your response, SIR.

Posted by Gidon on October 27th, 2011 at 3:57 pm

A great job with the tooltip!!

The system requires you to have the styles.css in the directory folder
I do not use stylesheet,
When I remove it – the system does not work.
What I need to remove in the code so this will work without stylesheet?

Thank you.

Posted by Hunter on November 29th, 2011 at 1:54 am

First let me say that this is great! It likely saved me much time and was very easy to get working and setup simply.

Second, I am attaching a modification to this code with some enhancements.

I wanted an ability to show the tooltip statically attached to an element in my flash rather than following the mouse.

I also wanted to have the tooltip hook be on any side or corner of the tooltip and position it accordingly to the element passed in.

lastly I wanted to be able to handle the mouseout event myself, so a simple option to disable the one used internally.

I uploaded the mod to a google project if you want to download it:
http://code.google.com/p/flash-as3-tooltip/

Thanks,
Hunter

Posted by Nodrius on February 15th, 2012 at 6:48 am

WOW!!, Awesome tooltip class!!!

Posted by Mighty Flash Gordon on May 23rd, 2012 at 9:45 am

Cool tooltip but I was wondering if you could make it all dynamic through xml???

Posted by mini storage new york on April 20th, 2013 at 4:14 pm

I like the helpful info you supply on your articles. I will bookmark your weblog and check again here regularly.
I am rather sure I’ll be informed lots of new stuff right here! Best of luck for the following!

Posted by Jovane on May 16th, 2013 at 1:10 pm

The link in description to John Bailey website is down: Tween Library Preferences and Strategy Patterns

This class helped me a lot.
Thank you.

Posted by 48013 on May 17th, 2013 at 5:50 pm

Is it alright if I repost a few of your posts as long as I provide credit and sources
back to hy-brid.com? My website is on the exact same topic as your own and my readers could certainly learn from much of the articles you
offer here. Feel free to let me know if this is okay
with you.
Cheers

Leave a comment