Tooltips and Toggletips

Figure 1 Example of Tooltip and Toggletip

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

A tooltip is a widget that displays additional information about a focusable element as a popup.
It is triggered when the control receives keyboard focus, or the user hovers the mouse over it.
- Ideally, information is visible on the screen as long as the triggering control has focus.
- Once focus is removed from the triggering element, the tooltip disappears.
- To meet 1.4.13 Content on Hover or Focus , the information must remain persistent and get dismissed only via a dismissing mechanism – like pressing Esc key dismisses the information.
- The additional information that appears must be hoverable i.e., when users shift their mouse pointer from triggering element to the information, it should remain persistent and not disappear.
- Content usually appears after a small delay and disappears when Escape is pressed or by clicking in the whitespace area of the page.
- When the tooltip appears, the tooltip content MUST NOT prevent the user from accessing content surrounding the tooltip.
- Tooltip SHOULD NOT get dismissed on mouse out.
- Tooltip container CAN receive focus to meet the WCAG 1.4.13 requirement.
A tooltip that contains multiple focusable elements SHOULD be implemented using a non-modal dialog.
A tooltip SHOULD NOT consist of action buttons like Close or Confirm.
The image/icon of the triggering control of tooltip SHOULD NOT be defined through CSS background-image property.
The triggering control of the tooltip MUST be visible in High Contrast Mode.
There SHOULD be a clear visual focus indication provided for the triggering control that displays the tooltip.
Focus MUST not update to the tooltip content that appears on interacting with the triggering control.

Note: The tooltip implementation requirements are still undergoing updates as per ARIA 1.2 practices. So, watch out for further updates by visiting https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip

The neutral container such as <div> or <span> elements containing tooltip content MUST have role="tooltip" and id attribute.
The tooltip content CAN be hidden using display:none property in CSS. Alternatively, HTML hidden attribute can also be specified.
The tooltip typically should be visible in response to a mouse hover using onmouseover event handler in JavaScript, or after the control that triggers the tooltip receives keyboard focus using onfocus event handler in JavaScript.
The tooltip content MUST be placed inline to the control i.e., the container in which the tooltip content is defined must be placed after the control that triggers it in HTML source code.
A tabindex="0" CAN be specified for the container that contains the tooltip content to ensure screen reader focus is received and the information can be acquired.

For example,

<div class="tooltip">
    <span id="business">Assessment Business</span>

    <!-- Tooltip Control -->
    <button class="tooltip_btn" id="tooltip_btn" type="button" aria-label="More Info – Assessment Business" aria-describedby="assessments-business">i</button>

    <!-- Tooltip Container -->
    <span role="tooltip" class="tooltiptext" id="assessments-business" style="display: none;">
        Pearson is the world’s leading learning company with expertise in a
        variety of assessments.
    </span>
</div>

A toggletip is a widget that displays or hides additional information about a focusable element as a popup.
It is triggered when the user activates the control.
Content disappears when Enter key is pressed or when left click of the mouse is pressed on the triggering control.
When the toggletip appears, the toggletip content MUST NOT prevent the user from accessing content surrounding the toggletip.
A toggletip CAN consist of action buttons like Close or Confirm.
The image/icon of the triggering control of toggletip SHOULD NOT be defined through CSS background-image property.
The triggering control of the toggletip MUST be visible in High Contrast Mode.
There SHOULD be a clear visual focus indication provided for the triggering element that displays the toggletip.
Focus MUST not update to the toggletip content that appears on interacting with the triggering control.

The triggering element MUST be defined using <button> element.
A descriptive and programmatic label MUST be provided for the triggering control using aria-label attribute or hidden off-screen text.
If an image is used to identify the triggering control, then a textual description MUST be defined for the image triggering control.
- If the image is defined using <img> element, use an alt attribute with descriptive value.
- If the image is defined using <svg> element, use role="img" and aria-label attribute to provide a role and an accessible name for the element.
  Note: Providing ARIA based role and attribute on SVG image ensures robust support across different environments.
The button MUST be defined with aria-pressed attribute to convey the state.
- In pressed state – the value of aria-pressed attribute MUST be set to “true”.
- When not in pressed state – the value of aria-pressed attributeMUST be set to “false”.

The container, in which the toggletip content is defined, SHOULD be specified with ARIA Live region using role="status". Alternatively, aria-live="polite" along with aria-atomic="true" CAN be specified to the container.
When the toggletip content appears, the container MUST NOT prevent the user from accessing content surrounding the toggletip.
Toggletip SHOULD show/hide information on pressing the space or enter key.
A tabindex="0" CAN be specified for the container that contains the toggletip content to ensure screen reader focus is received and the information can be acquired.
Toggletip content SHOULD remain persistent unless dismissed.

For example:

<div>
    <span id="statement">Accessibility Statement</span>

    <!-- Toggletip button -->
    <button type="button" id="toogleid" aria-label="More Info – Accessibility Statement" aria-pressed="false">i</button>

    <!-- Toggletip content -->
    <span role="status" class="tooltiptext">
        Pearson is the world’s leading learning company with expertise in a
        variety of assessments.
  </span>
</div>

<h3>Tooltips</h3>
<div class="tooltip">
    <span id="business">Assessment Business</span>
    <button class="tooltip_btn" id="tooltip_btn" type="button" aria-label="More Info - Assessment Business" aria-describedby="assessments-business">i</button>
    <span role="tooltip" class="tooltiptext" id="assessments-business">
        Pearson is the world's leading learning company with expertise in
        a variety of assessments.
    </span>
</div>

<h3>Toggletip</h3>
<div>
    <span id="statement">Accessibility Statement</span>
    <button type="button" id="toogleid" aria-label="More Info-Accessibility Statement" aria-pressed="false">i</button>

    <span role="status" id="tool1" style="display: none;"></span>
</div>

.tooltip button {
    border: none;
    margin: 0px;
    padding: 0px;
    background:#408840;
    width:19px;
    height:19px;
}

.tooltip button:focus {
    outline: 2px solid #003057;
    outline-offset: 1px;
}

.tooltip {
    position: relative;
    display: inline-block;
    margin-bottom: 3rem;
}

.tooltip .tooltiptext {
    display: none;
    width: 10em;
    background-color: #d4eae4;
    color: #003057;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 1rem;
    position: absolute;
    z-index: 1;
    top: -25px;
    font-size: 1em;
    padding: 0.5em;
}

.tooltip_btn:hover + [role="tooltip"], .tooltip_btn:focus + [role="tooltip"] {
    display: inline-block;
}

.toggletip button {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    border: 0;
    background: #003057;
    font-family: serif;
    font-weight: bold;
    color: #fff;
    margin-left: .25rem;
}

.toggletip .toggle_msg {
    display: block;
    z-index:99;
    background: #d4eae4;
    color: #003057;
    border: 1px solid #ccc;
    padding: 0.5em;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    width: 16em;
    margin: 0.5em;
    font-size: 1em;
}

let trigger = document.querySelector(".tooltip_btn");
let tooltip = document.querySelector('#assessments-business');

trigger.addEventListener('mouseenter', () => {
    tooltip.style.display = 'inline-block';
});

trigger.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
});

trigger.addEventListener('focus', function() {
    tooltip.style.display = 'inline-block';
});

trigger.addEventListener('blur', function() {
    tooltip.style.display = 'none';
});

trigger.addEventListener('keydown', function(e) {
    if (event.key === 'Escape') {
        tooltip.style.display = 'none';
    }
});
tooltip.addEventListener('mouseenter', () => {
    tooltip.style.display = 'inline-block';
});

tooltip.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
});

let toogle = document.getElementById("toogleid");
toogle.addEventListener('click', function() {
    let tool1 = document.getElementById("tool1");
    tool1.style.display = tool1.style.display === 'none' ? 'block' : 'none';
    if (tool1.style.display === 'block') {
        toogle.setAttribute('aria-pressed','true');
        tool1.innerHTML='<span class="toggle_msg">Learn more about how Pearson Assessments is addressing accessibility.</span>';
    } else {
        toogle.setAttribute('aria-pressed','false');
        tool1.innerHTML = "";
    }
});

toogle.addEventListener('keyup', function (e) {
    if (e.keyCode == 27) {
        toogle.setAttribute('aria-pressed','false');
        tool1.style.display = 'none';
        tool1.innerHTML = "";
    }
});

document.addEventListener('click', function (e) {
    if (toogle !== e.target) {
        toogle.setAttribute('aria-pressed','false');
        tool1.style.display = 'none';
        tool1.innerHTML = "";
    }
});

toogle.addEventListener('blur', function (e) {
    toogle.setAttribute('aria-pressed','false');
    tool1.style.display = 'none';
    tool1.innerHTML = "";
});

Tooltip

Toggletip

Accessibility Statement

Tooltips and Toggletips

Tooltip

Toggletip

Why is it important?

Working Example