by Karina Beattiger 5.August 2008 08:34
I've gone on record numerous times talking about how much I really don't want to be bothered with learning javascript. As useful, awesome, flexible, etc. as it is, it's a full on programming language that may not be as hardcore as .NET or PHP, but more involved than just knowing CSS. My brain can't take the pressure. Or, at least, so I assumed. Hoped. Whatever.
This is where I digress somewhat...
Among the many benefits of Twitter (stalking, obsessive stalking, and stalker-collecting, to name a few), the best is the ability to find/meet new people and develop a relationship comprised of pixels and shared interests. Mrs. Flinger, a web designer from near-but-not Seattle, is one such conquest. (Look at her blog; is it not keen? Worship the keen.) Through Mrs. Flinger, I hop-skipped-jumped my way through her contacts to find Joelle. Joelle, also known as Tenth Muse (because the other nine are too busy to bother with me, you see), has a website that serves as the inspiration for this post. It's not the color (though the retro look is ridiculously fun!) or the art (I hope that if I ever meet Joelle, she has a bouffant). Rather, what caught my attention is the absolutely fascinating tool-tip hover styles she's got going on all throughout various portions of the site.
My eyes: "...What was that?"
My brain: "Ackgglmurglghaaaaggggh. See, Castle of--"
Must. Have.
However, a glimpse into Firebug's secret stash of codery goodness reveals.... nothing! Bwahaha!
After a brief moment of extreme fail, I sat down at home this weekend and resolved to figure out what was causing such lovely tooltips. WD Weems mentioned javascript, and sure enough, I found this little gem of a script here. Dustin Diaz has been floating around since 2006 and earlier with this fabulous little device, and I never knew. This is a deep blow to my aesthetic-pride.
Sweet Titles is a bit of javascript that basically replaces your normal link tooltip with something that you can style as per your own design. You can, with a little JS know-how (or very good fakery of such), remove the URL in the tooltip, edit the URL, arrange the tooltip so that it follows along with your mouse, and make it so that the tooltip only works on certain items with certain tags.
Is this not the most awesome detail ever?
There are some drawbacks to the script: those who aren't familar with JS may (cough) find themselves at a loss when it comes to making the above edits. The discussion helped me piece together this and that (I spent 2 hours trying to figure out what 'wrap' meant!) and the whole shebang has quite the fan crowd. Of course, anyone turning off javascript on their computers will not see said beautiful new tooltips -- but then, anyone turning off javascript nowadays also probably eats cardboard because it's substantial and sponge-baths in rain water lest the germs building in the water pipes cause a plague of lemur-ism.
Yes, lemur-ism. Monkey-itis. You never know.
As the current script is somewhat old, I have every intention of handing it over to Kyle -- after chasing him down, tying him up, and nagging him long enough to focus on it, of course -- and making him comb over it with the WD Weems eye we all respect (and think rolls at an odd angle now and again). In the meantime, I am implementing it in my personal site as a beta run.
Sweet Titles isn't just another pretty color. It's a very small detail, but it's the kind of detail that pulls a site that much tighter together.
And let's all be honest here... I like bells and whistles.