What Am I Looking At?!

So I was just updating the details for the framework on the ColdFusion exchange on Adobe's site. The exchange itself has some features that are a bit outdated, like the list of "supported browsers" indicates versions of IE all the way back to 1 individually, plus WebTV (does anybody still use that?) but doesn't make any mention of Mozilla later than 1 (Firefox for example).

Anyway, a little further down it shows the above select box for the type of extension you're contributing to the exchange. The list includes all sorts of options for what seems to be most Adobe products, not just ColdFusion, so it includes Photoshop, Illustrator, Dreamweaver, Flash, Fireworks, JRun, Director ... you get the idea. Anyway, because it includes all their products and wants to specify many sub-categories (ColdFusion Custom Tags vs. Components vs. whole applications etc) each individual item in the list can get fairly long and many of them get clipped as you see in the screen capture here.

Being a programmer, I was able to right-click on the option for "ColdFusion: Functions, CFCs & Custom Tags: ColdFusio" and select "inspect element" using the FireBug plugin for Firefox and see that the text for that specific option ends with "n Components". But for any user who's either not a programmer or who doesn't use FireBug (for example, a Photoshop contributor), this is a bad thing. It happened because a designer felt that the forms would be more visually appealing if large input elements like that had a maximum width so the whole form is reasonably consistent visually. I don't disagree however, it does create a problem for people who want to use the form.

Although it's not a perfect solution, I have found that both Internet Explorer and Firefox support title attributes on both the select element and the individual option elements. And this is something that's already built-in to the onTap framework when you use the HTML abstraction features, it will automatically add a title to each option and an onchange event that resets the title on the select box when you select another option. This way if you move your mouse over the option or over the select, the "tool tip" created by the title attribute will show you the part of the text you couldn't otherwise read because it's clipped. I thought I'd mention it here for others since its something the exchange team at Adobe hadn't caught on to yet. Anyway the code ends up looking like this:

Here's a screen-capture of how this works from my day job.

Unfortunately when I use the print-screen button in Windows Vista it doesn't include the mouse pointer -- which makes it really odd that it does include the tool tip from the title, since it's a direct effect of the pointer's placement! Anyway, just imagine that there's a mouse pointer over that highlighted option, showing you that tooltip so you can see the rest of the option text that's clipped by the select element.