Fun with Tooltips

mozilla

8 responses

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.

8 responses

  1. Fabian wrote on :

    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.

  2. Simon wrote on :

    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.

  3. Alexander Limi wrote on :

    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.

  4. pd wrote on :

    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*

  5. rdoherty wrote on :

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

  6. Fabian wrote on :

    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.

  7. dVyper wrote on :

    FF being beaten by the lowly IE?!?! Tis an insignificant area but still :O

  8. Neil Rashbrook wrote on :

    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 😉