Clagnut

Menu

Line breaks in tooltips

§ Mark-up techniques

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.

Screenshot showing a tooltip with a line break

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:

Guardian's visual representation of Argentina's goal

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).