I love my Tooltip, I really do. There isn’t a project where I haven’t used, abused and made it do unspeakable deeds. In fact, I’m surprised it hasn’t filed a lawsuit against me, for unpaid overtime. But I’ll be the first to admit that the original version was just a little bit flawed.
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…
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 marginsnnBy 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?
I think you mean Dancing, not Dancig. 🙂
o hell yeh. you’re back at this. you rock!
gong hay fat choi!
man i wish i was back in nyc, i’d be bugging you for some lessons.
fading animations…custom shapes! yesss months later it has come true!
christmas in february.
holler.
all this being said,
now its time to mess with it!
peace!
thanks again K!
i owe you a an UP’s t shirt/
hey karina,
sorry to be a boner,
this is an outside scroller question,
but i was just wondering,
have you ever run across a similar problem:
when you want to add a auto resizble, easable scroller for dynamic text coming from an XML node,
+ css stylization.
i’ve looked into a few things,
sorry to come from way out of left field with this.
anyway,
o man, tooltips w/ custom backgrounds,
this is going to ruin my daily go-abouts.
thanks again!
Hiya Stephen 🙂
Yep, Dancing it is…
PS: Thanks for the LJ syndication – I just realised that I completely forgot to reply to you about that… D’oh.
Alvin – 🙂 🙂
I thought it was the tooltip that was meant to do the singing and dancing 😉
But if you want some lessons you’ll have to come and visit Ireland, not NY…
About the scroller – not sure exactly what you’re trying to do and which part are you stuck at? I’ve got some scroll bars in my projects, but nothing fancy – just fixed sized and non-animating ones.
Karina
woah woah. ireland.
i thought it said somewhere you were in brooklyn, ny. pooop.
well it doesnt matter. i’m in tokyo. maybe the whole global warming ice caps thing will go down and all the islands mutate into one giant chunk again.
i’m currently messing with the claudio scroller on the kirupa forums, if i ever get it to work i’ll post it.
hmm…scrollable …tooltips… hmmm lol
thanks again karina!
random:
hey, i found this blog of Quasimodo’s…
he’s got alot of cool source codes to mess with on his site.
i’m currently trying to figure out how to tween gradients and
he has a cool colormatrix class,
just incase anyone cares,
http://www.quasimondo.com/archives/000565.php
You mean all the giant chunks will mutate into islands, don’t you? 😉
I played around with the idea of scrollable tooltips, but couldn’t find too much use for it – when you roll off the object that caused the tooltip, you would normally hide it, so what good is a scrollbar? Auto scrolling might be more useful, but who’s got the time…?
hey karina,
is it possible to load two tooltips at once in two different areas on a stage from a single onPress or onRollOver event?
i.e:
if i rolled over a button, and i wanted to display a small blurb of what the items loaded would be, and then also another blurb with the title of that thing about to be loaded.
thanks!
Nope, only one tooltip movie clip will be created at any time (tootlip_mc) – when you call “Tooltip.show()” the old tooltip will be deleted and a new created.
There’s no way to change that short of rewriting the tooltip – which I’m not planning on any time soon 😛
What you could do instead is maybe write the two blurbs into multiple paragraphs, and seperate them with extra lines or an image, or make them different colours/fonts/styles by using html and the new stylesheet option creatively. Or cycle through the blurbs with setInterval.
Karina
Hi Karina,
How do you point to an external image file?
Thanks
That’s easy – you just embed it in the html just like you would normally in a
website, keeping to your relative folder structure, eg:
Tooltip.show("<img src=’images/myImage.jpg’/>Some text", {html:true})
Conversely, Tooltip.show("<img src=’myImage’/>Some text", {html:true}) – would point to a linked symbol
with that name.
Karina
hey karina,
can Tooltip.show take on string variables?
if i was chucking thumbnails onto the stage via a for loop…
could it also be possible to have the tooltip.show inside a for…loop…
say:
allXML = this.firstchild.firstchild
// (if this was all the data in an XML)
for ( i=0, i>length, i++) {
var preview:String = allXML.childnode[];
// this would be a variable holding all the nodes containing some img link…
// i.e… previewImgs/img01.jpg
// i.e… previewImgs/img02.jpg
//so forth…(for loop cont’d)
this.thumb_btn.onRollOver = function () {
Tooltip.show (preview);
}
}
sorry i just threw this together on the spot, the for loop and xml pointing is probably all screwy. please no one use this as an example, it’s terribly written.
just wondering if Tooltip.show can take on string variables.
thanks!
affin.
well, i found out half of that question already lol
sorry for being ig`nant!
check out example of the tooltip taking on string variables…
import com.neoarchaic.ui.Tooltip;
var myText:String = new String;
myText = “i love tool tip i love tool tip britney spears needs a haircut”;
ball.onRollOver = function () {
Tooltip.show (myText);
}
Of course you can pass string variables – there’s really no difference between string variables and strings, so you can always interchange one for the other.
And you can pass Tooltip.show() and hide() from anywhere at all – it doesn’t even have to be mouse events.
hey karina,
i’ve had some weird bugs where:
i set embedFont to true…:
test movie = tooltip shows, but no text;
test movie + simulate download = the tooltip doesn’t show.
i set embedFont to false…:
test movie = tooltip shows + font shows;
test movie + sim download = nilch. nothing shows.. hmm.
any ideas?
thanks!
alvin
Alvin, I don’t know about your simulated download, but there are very specific procedures that you need to follow for embedding fonts in dynamic fields:
You need to embed the font in your flash movie before embeding it into the tooltip. You do this by importing the font in your library and giving it a linkage symbol. For every bold/italic version of the font you need to have a version of that font with the relevant fields checked in the font import dialogue. In some cases you may also need to include a “dummy” text box with the font embedded for each font/weight/style and your character sets, which can be done by placing these text boxes into a symobl and giving it an export linkage. It’s a bit complicated to explain properly, so you better have a careful look at the tooltip demo and do the same thing with your fonts.
Karina
hey karina! i figured it out; it was actually because i was propegating the buttons and passing the toolTip.show to onRollOver’s of immitated clouds…(senocular has buttonEvents class that i was using to propegate buttons…you know…for overlappping and multiple onRollOver events to a certain instance);
i just reset my for loop and actually took out the button propagations to setup up my toolTip to pull from the attributes part of each of my xml albums… took a while. but its an awesome setup now!!!!!
go check out your tooltip in action!
superpowerups.com
sorry if i come off ignant`lol, it’s more that i’m hungry.
alvin
hey karina.
i’ve been testing out the tooltip’s ability to point to external images…
and for some reason it only works when there’s a bloat of text following the img src embedding…
otherwise, if it’s just an img src [and this is not referring to the linked symbol technique]
the tooltip comes up empty and doesn’t apply the width parameter.
any tips?
thanks!
alvin
ah no puns on the “any tips” intended sorry.
flash’s html embedding sucks poop. it needs both the width and the height inside the tag… which is crap if you want your image to be proportional…
i was trying to use karina’s tooltip to implement a thumbnail preview…
similar to the one with slideshow pro…. but i guess it’s not having it right now…
hey karina…i was breezing thru the class file…
i’ve tried targeting the tooltip_txt….the tip.tooltip_txt…_root.tooltip_mc…on the main stage…
but it’s coming up undefined…
is there a way i can do this?
thanks!
alvin
Hi Alvin,
Did you try simply adding a few breaks or paragraphs after your image?
Also, you can attach a class definition to your custom shape symbol and have that load the image automatically when the mc is initiated, inside a nested clip. Don’t forget that the nested clip is going to be stretched to the tooltip’s proportions, so you’d need to use AS to compensate for that.
Karina
Nice work. Any plans to make an ActionScript3 version?
I think this is the single best open source Tooltip I have stumbled on across the web. Thank you so much for putting this together in a way I can tear it apart and learn from your experience. It works great and is a blast to use.
If I were to have to find a recommendation it would be to optimize the fade somehow and update it for AS3. The fade is chunky on most test systems.
Whoot
Andrew
Thanks, I appreciate that 🙂
Sorry but I can’t do anything about AS3 yet, the upgrade to CS3 costs a small fortune in Europe, and I can’t justify paying for it just yet…
Great tooltip post Karina. The question is: will I dare to implement it into my website without destroying it 😉