Fun with Tooltips « Mozilla Webdev

Fun with Tooltips

By Ryan Doherty

Tooltips example

A long time ago, at a far away company, I was given a project that required a not-so-usual use of tooltips. I had to implement multi-line tooltips like so:

multi-line tooltip

Luckily it only had to work in IE, and line breaks for tooltips in IE are just normal linebreaks in HTML, so nothing too complicated. But this got me thinking, what else is possible with tooltips? What are the limitations of tooltips? Is there any consistency between browsers?

I’ve setup a test page with all my tests. I tried to test everything from max-lengths, line breaks, tabs, html, UTF-8 characters to just lots of spaces.

Some interesting things I found out are some browsers will truncate (Opera, IE), some allow tabs and linebreaks (IE) and some don’t (Opera). I won’t list them all, check out the compatibility table that’s in the test page.

{

About Ryan Doherty

Foodie, wino, frontend performance and Personas.

This entry was posted on Tuesday, July 14th, 2009 at 2:05 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

8 Responses to “Fun with Tooltips”

HTML5 says the following:
“If the title attribute’s value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.”
http://www.whatwg.org/specs/web-apps/current-work/#the-title-attribute

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=358452
Behavior in other Browsers: http://www.webdevout.net/browser-support-html#support-html401-attrscore (HTML 4.01)

Tabs and HTML is definitely forbidden in title.
Fabian on July 14th, 2009 at 2:37 pm
Firefox used to truncate them, which was annoying. I think it was fixing in 3.0…

My expectation (regardless of official standards) is that is should correctly render all printable characters, handle embedded linebreaks, and provide sensible line-wrapping. Anything more – embedded HTML, tabs, fancy formatting – is probably stretching the purpose of a title attribute a bit too far.
Simon on July 14th, 2009 at 4:04 pm
Also, Firefox times out the tooltip after a certain number of seconds. Drives me nuts, and makes it hard to use the tooltip as a quick “preview”, which most forum software does.
Alexander Limi on July 14th, 2009 at 4:54 pm
you had to do this test to realise this ? Try doing regular web development and you’ll realise that cross-browser compatibility is A JOKE! It’s extremely hard to get excited about any of the Firefox 3.5 CSS changes such as transforms and so on, for this very reason: incompatible across browsers!

*sigh*
pd on July 14th, 2009 at 8:51 pm
@Fabian: thanks for the links! Interesting reads.

@Simon: yeah, I never expected HTML to work at all, but I figured I would try anyway to see if tags were omitted or caused any issues.

@pd: Yeah, the whole reason I did this test is because I knew there would be differences between browsers and I wanted to find out. And the only way we’ll make progress with the Internet is if someone decides to jump ahead of everyone else and implement new features.
rdoherty on July 14th, 2009 at 9:27 pm
Don’t blame him for writing a test case!

@rdoherty: why don’t you add this as a test case to the bug? You can also post this into the WHAT WGs working group, so they have a test case for the title attribute.
Fabian on July 14th, 2009 at 11:08 pm
FF being beaten by the lowly IE?!?! Tis an insignificant area but still :O
dVyper on July 15th, 2009 at 3:14 am
I’m sorry, I didn’t realise that Firefox explicitly deletes newlines and replaces tabs with spaces before displaying the tooltip, but if you want to see what the effect would have looked like, you could try using a SeaMonkey nightly
Neil Rashbrook on July 15th, 2009 at 3:32 am

Mozilla Webdev