Skip to main content
Workforce LibreTexts

5.5: Tooltips

  • Page ID
    15614
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    A tooltip is typically used to display some information about its owning element when a user hovers a mouse pointer over or gives keyboard focus to an element. Tooltips might include a definition for a word, perhaps full wording for an acronym or abbreviation, or maybe instructions on how to operate a tool or widget. There are many possibilities.

    Tooltips are an enhancement for the default “title text” standard with HTML. They provide much more flexibility in the presentation and types of information that can be presented than a standard title text tooltip.

    WAI-ARIA roles, states, and properties used in a tooltip

    • role="tooltip"
    • aria-hidden:[true|false]
    • aria-live="polite"
    • tabindex = [0|-1]
    Suggested Reading: For details on constructing accessible tooltips, refer to: WAI-ARIA Best Practices: Tooltips.

    The following JSFiddle presents a typical tooltip. Review the JavaScript and HTML markup. Test the tooltip presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle by clicking “Edit in JSFiddle”, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the tooltip before completing Activity 6 on the page that follows.

    A link to an interactive elements can be found at the bottom of this page.

    The first thing to add to the init() function, where the tooltip <span> element is defined, are the WAI-ARIA attributes. First, define the tooltip with role="tooltip". Hide the tooltip by default with aria-hidden="true". Also, add a live region with aria-live="polite", so screen readers automatically read the tooltip when it appears. Note, the WAI-ARIA 1.1 best practices recommend using aria-describedby within the owning element to reference the content of a tooltip, which does not announce as expected with current versions of Chrome. Instead, we use aria-live, which announces correctly across all current browsers.

    A link to an interactive elements can be found at the bottom of this page.

    Next, add keyboard focus to the element the tooltip belongs to with tabindex="0", and add focus to .on('mouseover'), so both a mouse hover and keyboard focus open the tooltip.

    A link to an interactive elements can be found at the bottom of this page.

    Also, further down in the owning element’s definition, add aria-hidden="false" so the hidden-by-default tooltip becomes visible when the mouse hover or keyboard focus occurs.

    A link to an interactive elements can be found at the bottom of this page.

    Also, added here is aria-hidden="true" to be sure the tooltip is hidden from screen readers, should a mouseout event close the tooltip, adding it to .on(mouseout) chained to the element ($elem) definition.

    A link to an interactive elements can be found at the bottom of this page.

    Adding Keyboard Operability

    WAI-ARIA best practices defines keyboard interaction for a tooltip as follows:

    Recommended Keyboard Interaction for a Tooltip

    Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.

    • Esc: Dismisses the Tooltip.

    Note:

    1. Focus stays on the triggering element while the tooltip is displayed.
    2. 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 mouseOut.

    Source: W3C WAI-ARIA Best Practices 1.1

    Keyboard operability for a tooltip or, rather, the owning element is relatively simple. As a keyboard equivalent for the .on(mouseout) described above, .on(blur) is chained to the $elem element and within it aria-hidden="true" hides the tooltip again, if the mouse pointer is not over the element.
    A link to an interactive elements can be found at the bottom of this page.

    Also, if the Esc key is used, add aria-hidden="true" to hide the tooltip, even if the mouse is hovering, or the owning element has focus.

    A link to an interactive elements can be found at the bottom of this page.

    Accessible Tooltip in Action

    Watch the following video to see how ChromeVox interacts with a tooltip. The Tab key is used to navigate to the first tooltip, which opens a live region when its content is read aloud. Pressing the Tab key once again, move focus to the text input field, and a second tooltip opens and its content is read aloud. Aim to have the tooltips you update in Activity 6 on the following page operate and announce like the one in the video.

    Video: Accessible Tooltips

    Thumbnail for the embedded element "Accessible Tooltips"

    A YouTube element has been excluded from this version of the text. You can view it online here: https://pressbooks.library.ryerson.ca/wafd/?p=336


    This page titled 5.5: Tooltips is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.

    • Was this article helpful?