type: widget

release: 1.9

status: released

documentation: http://api.jqueryui.com/tooltip/

1 - Description:

A tooltip is a small overlay that sits over the main page that can be used to provide content or functionality that does not need to be always visible. Tooltips usually look like a small box or callout and can be trigged by a wide range of events. All tooltips should employ collision detection via the the Position utility.

2 - Visual Design:

3 - Functional Specifications/Requirements:

The tooltip widget can be applied to any element. The tooltip supports direct use on an element and delegation; the default options are set to work in both cases.

Focus takes precedence over hovering to determine the status of the tooltip. Focusing an element, then hovering over and out will result in the tooltip staying open. However, hovering over an element, then focusing and blurring, will result in the tooltip closing. The rationale for this is that if the user manually changes focus, then their mental focus has shifted, but if the user has just moved the mouse, it could be accidental or they could just be moving it out of the way.

Native tooltips are always suppressed, even if the tooltip widget is disabled. To fall back to native tooltips, the tooltip widget should be destroyed instead of disabled.

Keyboard

ESCAPE - Close the tooltip.

Accessibility

Follows ARIA authoring practices
Notes

When testing with NVDA, you may have to hit Insert+Tab to get the description for the element, in addition to the name.

In some config/version NVDA will read the description automatically.

IE doesn't expose the Name attribute to screenreaders with an empty title ("") so JAWS just reads the description.

Removing the title instead of setting it to an empty string fixes this, but doing so in a mouseover event handler will still cause the native tooltip to show with the previous title.

In virtual mode, both JAWS and NVDA also look at the DOM and will use the element's text as the name, so it doesn't matter that the Name attribute isn't exposed. In application mode, they will ignore the DOM text, so the missing Name attribute is problematic.
When the tooltip text (Description) starts with the same text as the DOM element's text (Name), JAWS will ignore the description.

Probably due to many authors setting the title attribute to the same value as the text, instead of some actual useful value.

Sometimes JAWS reads the description twice; not sure why.
Safari with VoiceOver has a similar issue as IE, except that Safari exports the right Name, but VoiceOver ignores it.

4 - Markup & Style:

(only used prior to implementation)

5 - Latest version of plugin:

http://view.jqueryui.com/master/demos/tooltip/default.html

6 - Open issues

Italics means we'll ignore those issues for a first release. We need more information, context, experience or usecases to properly solve them.

While sticky tooltips are still described, we currently don't plan to implement them, as their interaction is too close to a dialog while lacking the proper interactions, eg. ESC to close wouldn't make sense for a tooltip. We may get back to this eventually.

Connectors aren't implemented, yet. There are various approaches and none are really satisfying so far. Some resources:

qTip implements connectors, uses canvas/vml. New 2.0 version implements polygonal CSS as soon in the previous examples also.
Filament Group's CSS triangles don't properly work in IE6 either, still, a prototype was implemented - it reads the theme colors and sets them on the triangle

How to handle tooltip width:

Don't restrict at all, just let the tooltip grow based on content

works for normal title-lengths
can get very big for long texts
makes it trivial to define in CSS (no override necessary)
could also be set in open-event when the content is present, to calculate something

Set a fixed width in theme

avoids tooltips getting too large
has to be overriden
usually either too big or too small, doesn't adapt to content

Set max-width in theme

anything smaller adapts to content
no/bad IE6 support
text-wrapping rather arbitrary, will probably look bad in a lot of cases when content is wider then the default max-width

How existing plugins handle it:

Jörn's tooltip doesn't specify a width, by default; user has to fix that where necessary, no known/reported issues with that
clueTip and qTip both set width via JavaScript as inline styles, not something we want to do; at least qTip has also min/max width options, probably also for height