Browser Tooltips Support

Many desktop browsers support tooltips, which are small windows that pop down under the cursor when mouse is placed over certain elements in the document.

As of HTML 4, the generally accepted way of producing a tooltip is to put a title attribute in the element tag, with the text you want to be displayed in the tooltip.

It is unsurprising that there isn’t much consensus among the producers of the several major browsers as to how tooltips and the title attribute should be implemented. Here, I’ve made a small study of the various behaviors in several of the browsers I have at my disposal.

Some browsers place the title attribute text in the status area of the browser window. MSIE produces tooltips with the alt attribute of some elements, so I also compared browser treatment of that element.

Tooltips are especially handy for annotating clickable maps. Since the advent of the abbr element, they have been used to display the meaning of abbreviations. There is some disagreement over what the behavior of the title attribute should be for anchor (<a>) elements, whose URL has traditionally been displayed in the status area.

I have yet to find a smartphone-based web browser that supports tooltips at all: they lack the concept of “mouse hovering”. However, some e-book readers do support them: Kobo Reader in particular.

Tests

Map area

alt only alt of alt then title alt of title then alt

four color squares

Abbreviations

no title
with title

Anchor

url only
url and title

MSIE 6–10

anchor elements
Only title attribute will bring a tooltip.
map area elements
Either alt or title attribute will bring a tooltip. In presence of both alt and title attributes, always prefers alt.
abbr elements
Text of title attribute displayed in tooltip.

Mozilla Firefox

anchor elements
map area elements
Only title attribute will bring a tooltip. alt has no visible effect.
abbr elements
Element gets dotted underline; cursor changes to question mark; title attribute displayed in tooltip

Opera 6-12

In Opera, tooltips can be turned on and off: in Opera 6, Preferences-->General-->Accessibility. Since Opera 8, Settings-->Preferences-->Advanced-->Browsing.

anchor elements
map area elements
Only title attribute will bring a tooltip. Text of title attribute also displayed in status area.
abbr elements
Text of title attribute displayed in tooltip and status area.