RSS Feed

Peter Goodman's blog about PHP, Parsing Theory, C++, Functional Programming, Applications,

Flash Tooltips Using jQuery

This is a follow-up to my previous post about Flash embedded tooltips using javascript.

You can check out a working copy of this at http://ioreader.com/code/javascript/Tooltip2/index.html and can find a download link of all of the source code at the bottom of the article. Please note, I have only tested this on Mac browsers.

Why?

When I first created this this little experiment a few months ago I wanted to replicate the neat window effects that the OS X gui can do. Obviously that would have been impractical for a full-blown windowing system, but for tooltips it could have easily worked. Unfortunately my Flash animation skills are lacking; however, I make up for this with Actionscript.

Is this necessary? Are poppuping up Flash versions of normally dhtml tooltips useful? In terms of practicality, no. Sometimes the tooltips themselves take a while to load up and finally display. Otherwise, with flash we can accomplish some cool things such as rounded corners, drop shadows, transparency, and neat shapes all without having to mangle with the DOM or with CSS.

And so we come to the question: but why? Simply put, it was a fun experiment. I wanted to see if I could do a better job than last time and I succeeded.

Approach and Limitations

Normal tooltips come up when you have a "title" or "alt" (or both, as is the case when pairing the <a> and <img> tags) attributes set on elements. These generally work well, but for large amounts of text get ugly. Also, HTML cannot be injected into these attribute and be expected to degrade gracefully as well.

This is where definition lists come in. As the name implies, these lists allow you to specify a string and also specify definitions for it. I chose these for two reasons. First, I could easily contain the entire tooltip within the text within a simple list. Second, the definition list lends itself well to the concept of tootlips because the definition is implicitly highly relevant to what's being defined--at least that's how I rationalized it in terms of a search engine spider parsing the HTML.

An inherent limitation with definition lists is that they are block-level elements. As such, they cannot be placed within HTML paragraphs (<p>) and similar tags. If this idea was to be actually pursued, then they should be made to simply replace normal tootlips offered by the title and alt tag attributes. In retrospect, making my life easier by doing this would have been a good idea, but oh well. I wanted to get HTML into them!

For this script, we will be dealing with Flash (and Actionscript), Javascript, and HTML/CSS. The last iteration of this script used actionscript's ExternalInterface class to deal with javascript-actionscript communications. This times decided to rely on the built in flashvars property when displaying Flash files in HTML pages.

Goals

I had several goals when making this. First, I wanted the flash version of the tooltip to act like any other tooltip in that it would be constrained by the dimensions of the browsers viewport. This is done through simple javascript. Also, I wanted to have it be able to degrade to normal DHTML tooltips (haha.. degrade to javascript, how many times have you heard that?).

The nature of Flash is such that all actionscripts are compiled into the final movie even if they are included into said movie from outside the movie itself. This means that even if we made changes to the actionscript file that deals with the flash side of the tooltip we would still need to open up flash and export the movie. This is a bit of a hurdle, but we will assume that people can easily jump past it. To make everyone's lives easier then, I have made a global config file. This is a configuration file shared by both the actionscript and javascript for maintainability between the two parts of the script and also for consistency between flash and javascript tooltips if the flash version is not supported.

Helpful 3rd Party Code

I mentioned earlier that I wanted rounded corners in my flash tooltip, so I went and downloaded these great actionscript drawing classes to do the job. This time instead of writing all the javascript ground up, I decided to use jQuery and its awesome flash plugin. Besides jQuery's awesomeness, using the library allowed me to handle all cross-browser inconsistencies at arms length. Finally, a function by Peter-Paul Koch at Quirksmode allowed me to get information about the viewport.

Putting it Together

Initially I wasn't used to the jQuery flash plugin so I used their sIFR example as a base and worked up from there. What an awesome plugin, development went very smoothly. On the actionscript side, everything was again quite simple to put together. The most important thing about how all this works is that first, the javascript writes the flash HTML with a width and height of 100%. Then, I just set the dimensions of the flash movie to 1x1 (any size works). The reason this was done is because everything in the actionscript works by the Stage.size. So, the flash scales to the bounding box of the <dd> and jquery sets the size of that box based on the text inside it. Everything works together in a really nice way.

After the two scripts were finished and working, I created a simple tooltip.config file. This set a TT_CONF variable to an object literal (aka JSON) with configuration values that are shared between both javascript and actionscript. So, if one wants to change the font size in actionscript, they need only do it in there, export the tooltip.fla, and then the javascript will properly adjust itself with the changes. Hooray for consistency.

Conclusion

This was a fun diversion and experiment. I think last time I was overcomplicating--even though the result was rather simple. This time around I've made a rather simple script that can be seamlessly integrated into any website (although I don't suggest it).

You can get the code at http://ioreader.com/code/javascript/Tooltip2/Tooltip2.zip


Comments


Comment