¶ So I was perusing the Guardian’s World Cup fixtures guide and noticed a little feature I’d never seen before: line breaks in tooltips.
The solution for achieving this is devilishly simple – just use the carriage return entity 
 in your title attribute, for example:
title="Kick-off : 20:00
 Stadium :
Rhein Energy Stadion, Cologne"You are limited by how much information you can actually show in a standard tooltip as IE/Win will only display the first 64 characters of a title attribute, however using an entity like this is still a nice, lightweight technique for basic formatting. More advanced formatting can be achieved through JavaScript wizardry such as Nice titles.
The little triangle image used by the Guardian to indicate a note is also a nice touch, and borrows from a visual approach which may be familiar to users of Excel. Whether important information like venue and kick off time should be ‘hidden’ in a title attribute is another question.
On a World Cup related note, Dan Hill has been waxing lyrical about the fantastic goal scored by Argentina against Serbia & Montenegro. Dan posted a scan of Guardian’s visual representation of the goal which I’ve repeated here:
It is clearly quite a challenge to create a static image of such a complex event which occured over time. For that reason, I’ve taken the liberty of embedding the video for your delectation and comparison purposes (invalid code follows).
Comments
1
You’re right, those line breaks do look nice, but don’t render in either firefox or opera. Bugger.
2
Adam – you’re right about Firefox (Mac). Interesting that they work in Camino though, and Safari for that matter.
3
Nice tip for a little optional extra, should the need arise.
4
I’ve tried to put line breaks in tooltips before but didn’t noticed it worked in IE as I was trying in FF!
Re: the video, we should get rid of Clyde Tyldsley and replace him with the commentator from that video… that’d spice up the England matches somewhat.
Gooooooooooooooooooal!
5
That’s the first time I’ve seen that goal. Lovely.
Jonathan Pearce used to commentate a bit like that on the radio and Channel 5. Ugh. Then he moved to Five Live, and I suddenly realised how informative and detailed he was now he wasn’t actually shouting. So no, no Argentinian-style commentary, please. We’ve got 40,000 fans to do the screaming.
I wonder if any other entities would work in a more cross-platform way. This wouldn’t be anything to do with the age-old Mac/Windows carriage return/line feed issue, would it?
6
If you don’t mind soiling yourself with Microsoft’s conditional comments, you can use them for embedding all manner of objects. See this DreamHost wiki article I have been working on.
7
Indeed, I’ll note this somewhere in the back of my mind. This is good to know. It would make a great interview question as well :p
8
They’re using the alt attirbute of the img tag, not the title attribute so they really should not render in any browser.
9
Actually, having looked closer, they are using a
titleattribute on atdand analtattribute on the triangle image, which partially debunks my comment about them ‘hiding’ the information in atitleattribute.10
Well, actually I don’t know what about web-programming, but actually in common programming it’s working too. I know this trick for several years :)
11
Strav, you know – it’s good, but let others share there knowledges
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.