Tooltip
Background
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.
Tooltips do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.
Common Usage at dv01
Icons should always be implemented with their corresponding tooltip. This can include the name of the icon and/or a short phrase explaining what the icon does.
Keyboard Interaction
Escape: Dismisses the Tooltip.
Note
Focus stays on the triggering element while the tooltip is displayed.
If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.
Positioning
Default:
- centered above the element
- with the tip of the triangle touching the element
Other options:
- Centered below the element
- To the right of the element
- To the left of the element