• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!



Page history last edited by Scott González 9 years, 9 months ago

type: widget

release: 1.9

status: released

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

demo: http://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.



  • ESCAPE - Close the tooltip. 



  • 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:





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:


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

Comments (0)

You don't have permission to comment on this page.