Widget: Tooltip

Details

Implementing This Widget

Implement the Tooltip widget whenever you want a tooltip that:

• makes clear the relationship between the tooltip and the form control
• shows or hides the change in state from the initial state
• hides information not supported by older browsers
• manages the focus and keyboard accessibility

To implement the Tooltip widget:

1. Simply include this javascript and add an attribute called data-tooltip to any element that you want to use a tooltip with.

   The value of this attribute should be the tooltip string you want to use.

2. Call deque.createTooltip() on a reference to the element.

   The tooltip will show up both on focus and on hover. If you only hover without focusing, the tooltip will go away on mouse out. However, if the element has focus, mouse out will not clear the tip - you have to exit focus for it to go away. Alternatively, you can simply hit escape to hide it.

3. Optionally, pass the createTooltip function with a second argument that takes as its input (1) a reference to the trigger element and (2) a reference to the tooltip, and returns an object with numeric values for keys top and left.

   These values get converted to absolute position values in pixels for the tooltip. This way you can have complete control over how the tooltip is positioned.

Expected Operation and Accessibility Features

The tooltip should function in such a way that the following statements are true:

• The tooltip never receives focus. Focus stays on the textbox.
• The tooltip widget can be shown via keyboard focus or by the onmouse event.
• The tooltip widget can be hidden by removing focus from the text box or by moving the mouse off the textbox.
• The tooltip widget can be hidden by pressing the Escape key.
• The tooltip is only hidden via JavaScript and CSS selectors. If JavaScript is not available the tooltip is shown.

Validation and Developer Notes

In order to validate this control, you must verify the tooltip will show up both on focus and on hover events via manual testing. Ensure that if you only hover without focusing, the tooltip will go away on mouse out. However, if the element has focus, verify mouse out will not clear the tip and that you have to exit focus for it to go away. Additionally, test the alternate method ability to simply hit escape to hide it.

Example Implementation Reference

To view an implementation of this widget, see Tooltip widget example.