Today I had to deal with hint.css, a little CSS library for non-JavaScript tooltips. It makes use of CSS3 animations, data-* attributes, pseudo elements and the content property. The text for the tooltip itself is stored in a data-hint attribute and gets displayed when hovered over.

I was facing a problem today where I had to display a tooltip with multiple lines. At first it seemed impossible to add line breaks to the content of an attribute. But after reading up on it for a bit I found a way that worked very well for me.

I inserted the line break via an entity like this:

<a href="page.html" data-hint="One line&#10;And another line">My link</a>

and added a white-space: pre to the pseudo element that represented the tooltip. Et voilà: multiline tooltips. That’s what I learnt today.