Table of Contents

2.2.2. Tooltips

Purpose

Simulated tooltips contain informative content that is displayed when hovering over an element with the mouse or the focus is set on an element. They can also be displayed when the element is activated.

They are referred to as “simulated” as they do not use the title attribute included in HTML, often to make them more visually attractive.

Note In 2012, the technique based on ARIA suggested here is not operational on all screen readers currently on the market. The aria-label attribute should nevertheless be correctly interpreted in the near future.

While waiting for improved compatibility, the following solutions are available:

  • Consider that the content proposed in the simulated tooltips is secondary (because it is accessible by other methods, for example) and implement this technique from now on.
  • Consider that the content proposed in simulated tooltips is essential, and prioritise other techniques, such as, for example, adopting the recommendations for pop-in windows, which can easily be adapted for simulated tooltips.

Basic HTML code

he basic HTML code for a simulated tooltip is very simple: 

<a href="#" aria-label="Content of the simulated tooltip">Link heading </a>

<note attention>Warning

Without JavaScript, the proposed content in the tooltip will not be accessible for those who do not use screen readers.

You need to make sure that users can access this content, (for example, by including the content on the target page of the link), or show the content on the initial page, in the event that JavaScript is deactivated.

Behaviour with JavaScript

When the user hovers with the mouse over the element, or the focus is set on the element:

  1. An empty container of type <span> or <div> is created in the DOM. This container will be used as the tooltip.
  2. The attribute value for aria-label of the element is duplicated into the newly created container.
  3. CSS files are used to position and style the tooltip as required.

When the mouse-over moves off the element or the focus is lost, the container is deleted from the DOM.

This behaviour may be applied when the element is activated. Consequently, when the element is deactivated, the simulated tooltip is then deleted from the DOM.

Démonstration