Freelance Frank

Adventures with jQuery tooltips

Acronyms are often neglected by developers. XHTML has a handy 〈acronym〉 tag that defines an acronym, giving useful information to browsers, spellcheckers, screen readers, translation systems and (last but not least) search-engines.

My home page features a number of acronyms. They’re not uncommon in the coding world, after all. I wrapped some in acronym tags and these work fine. But, naturally, it wasn’t enough. Enter jQuery…

The Qtip demo screen at craigsworks

I was after, in addition to the standard acronym definition, a tootip that goes into more detail for the unitiated. When hovering over S.E.O., for example, I wanted the standard ‘Search Engine Optimisation’ hover tag to appear as usual, but in addition, when clicking on S.E.O. a new window should open smoothly, with more details about what S.E.O. entails. The whole thing needed to look good and work well. jQuery was the obvious weapon of choice.

Wordpress has a JQuery plugin that enables smooth tooltips of the kind I was interested in, but I didn’t want to use a plugin for a number of reasons – the primary one being that it’s just too easy. So I went instead to the source – the jQuery code at craigsworks which the plugin is based on. After some tinkering around (basically modifying paths and so on), I had a complete module that slots into my front page and allows me to create acronyms with tooltips. Clicking on any acronym there prompts a smooth tooltip with content that I can modify in any way with internal XHTML.

One stumbling block was a conflict with my Mootools slider. That was quickly resolved, but I prefer to not have to multiply libraries unnecessarily. My next task is to re-tool that slider in jQuery (and maybe even leave the jQuery.noConflict(); up, just to keep the namespace clean and clear). Conflicts are a whole other story. I’ll post about that one some other time.