I’ve been seeing those cool pop-up link titles on various blogs, but until last night I had not been able to find a source of code that would allow me to use them on Phatic Communion. The General of The Benjo Blog, who uses pop-up link titles, pointed me toward a Wordpress plugin/hack he had used for his blog, but I couldn’t use it.

As often happens, I slip into revisionist moods, only not of the political / social / historical variety. While browsing for Movable Type hacks that would do what the Wordpress hack does, I began to find plugins that I’d seen before and put off incorporating. Thus began my odyssey.

Acronym

I found a cool MT plugin for acronyms, via the SixApart plugin directory, which I’d considered using previously. I already had the CSS code set up for acronyms, but hadn’t wanted to bother with plugging in acronym HTTP markup and title attributes for the few acronyms I use; because I use few, I hadn’t bothered with the plugin that would insert the necessary code automatically. To make this story short: I have installed the acronym plugin, so visitors will now get a helpful popup for whatever acronyms I happen to type. Such as HTTP.

One super cool possibility for the plugin: I can edit the database to include my own idiosyncratic acronyms, such as DAFT, and visitors will be able to see WTH I am talking about. This also might introduce another layer of interaction between my regular visitors and myself. (Let me know if I should use the plugin for comment entries as well…)

Nice Titles*

WDYK, but Henrik Gemal, the author of the Acronym plugin, actually uses those cool pop-up link titles! I did a search on his site and found an entry directing me to another site: Kryogenix.org. Stuart Langridge has a page with links to the necessary code and simple instructions for incorporating it — which don’t require a Movable Type installation. Basically, the Nice Titles are accomplished via a combination of javascript and CSS; the CSS can easily be edited to suit anyone’s aesthetic preference or web design.

Stuart Langridge’s instructions are simple, but they require access to server space since the javascript and CSS code are linked from any pages which use Nice Titles; they’re kept in separate files. I don’t see why someone on Blogger/Blogspot or some similar hosted service could not include the code on the template page: rather than link the codes, the CSS would be included in the rest of the CSS codes for the template and the javascript code would be included in the header also, between open/close tags for javascript. An image is called in the CSS file, so a Blogspot user would need to store the image offsite — or, since it’s a background image for the pop-up, one could change the CSS code to a solid color with color coding (the way a color is set for the background of the page) rather than call the image.

Note: The image provided at Kryogenix can be edited to create different colors for the background, if an image is used. I’d recommend sticking with a png format and translucency to get that translucent effect which appears for my pop-ups in Firefox.

Also, anyone using the Nice Titles codes should be aware that linking images and using link titles will create an error for IE users. (Firefox suppresses the error, it seems.) This only causes IE to pop up an error message when hovering the cursor over the linked image, isn’t serious but does kinda clash with the smooth visit visitors expect. It’d be better to stick with the “alt” markup for linked images and use the “title” attribute for linked text.

Finally, the pop-up link titles seem to run behind drop-down menus such as those I have in the right sidebar of my main page — for IE users. [IE does it again. And again! ARGH!] This isn’t serious; but then again, it doesn’t look too swell. I’ve tried using CSS to reset the Z-index of the drop-down menus and the pop-up link titles to correct for this, but to no effect. I’ll keep searching for a workaround, but for now I’ve discontinued using drop-down menus in the right sidebars of my pages. (—except for the front page, because I haven’t had time to decide what I’ll do instead.)

The Nice Titles script doesn’t seem to work for Opera, though. (Users of older browsers should still get a normal pop-up for the link titles, however.)

Titles

I’m lucky that I haven’t entirely ignored the use of titles for my links. Actually, I’ve been using titles for my blogroll links for some time now, and my MT Blogroll plugin makes including titles quite simple. I’ve added titles to my navigation links — but for the FAQs, because they’re rather self-explanatory — and I already had titles for my comment / trackback / etc. links at the bottom of my posts.

After installing the Nice Titles codes, however, I thought I needed to follow that course to the end.

David Raynes, who has designed quite a few useful MT plugins, designed one plugin that would make Nice Titles more useful — extremely useful — for visitors to Phatic Communion: MTLinkTitles. I had previously considered using the plugin, and I remembered it after incorporating the Nice Titles codes. Essentially, the plugin finds links in an entry, traces the link to the linked page, discovers the title of that page, and inserts the title as a link title in the link’s HTML for the entry. Voila! Rebuilding the site after installing the code and slightly revising the templates has rebuilt the entries with titles in all the links — titles which now pop up, thanks to Nice Titles.

Bad links, however, don’t have link titles. For obvious reasons.

I made a few other revisions to the templates, mostly related to navigation links, etc., where I had to manually add link titles or MT template codes for link titles. E.g., the list of related entries below some posts will now show short excerpts of those related entries in the pop-up. The category- and monthly-listing archive pages received a similar edit: hovering over an entry title will display an excerpt of that entry. Linked category titles will now show a description of the category.

My RSS pages also needed tweaking. Now that I have Nice Titles, I don’t need to list excerpts of blog feeds or news feeds under the story titles; the javascript I use for those feeds already inserts link titles to those links. So I’ve saved some space, and, to the Phatic Quad, I’ve actually added some more feeds. Try it out.

Is That a Miracle I Hear?

Not quite, perhaps. Because posts are searched for acronyms and links, and are rebuilt to include the automated edits, and because I use a pagination plugin for archive pages, and because I have a comment- and a category-listing page which rebuild with new entries…rebuild time can be much longer than it was before. When I rebuilt the entire blog — well, I’m hoping that saving comments won’t take too long, since not all pages of the blog are rebuilt every time a comment is saved (or put into moderation.) Saving a new blog entry or revising an entry can take a little longer than it took before, but I think the benefits outweigh my having to wait an extra few minutes for the entry to post.

The documentation for MTLinkTitles, BTW, says that the plugin stores discovered page titles in a database/cache, so once the process is run for an entry or a page, MT won’t have to look up the titles again. This is a good thing.

*Update (7-10-05): A hack of Nice Titles can be found on neo-dzygn-com which fixes the bug on Nice Titles for linked images and adds support for acronyms and abbreviations, among other additions — recommended.