Content on hover or focus

This criterion ensures that when hovering the mouse or having keyboard focus causes additional content to appear, the user can both perceive that content, and also dismiss it without moving the focus, so that they can still access the content beneath it. The criterion states:

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
Dismissable
A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
Hoverable
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
Persistent
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

This is a criterion that I haven't really considered much, as I don't tend to use pop-ups and stuff that appears on hover or focus. However, it does affect me when using other people's content, so I thought it might be worth looking into this a little. As usual, I have questions that I want to find answers to.

How does this work?

As you might expect, some Javascript is needed to make additional content appear on hover or focus. I found this example in the techniques section for this criterion.

Technique SCR39 Opens in new window

This is the triggerAnd this additional text gives additional context on the trigger term.

But then I wanted to play with it and make it more relevant to something I might use. I might write a paragraph that has several terms in it that require explanation. The additional content might explain these terms.

When I book a campsite, I want to be sure that I will be able to access the fresh water, grey wasteThe wastewater that comes from sinks, washing machines, bathtubs and showers. Opens in new window and elsan pointThis is where toilet or black waste is disposed of. Opens in new window independently.

There are two parts to this:

HTML

The text and the popup are both part of the <a> element. In the following block of code, the <a> element has the following attributes:

class="tooltip"
Enables me to style the tooltip in my CSS.
id="tooltip1"
Connects to the Javascript so that I can make things happen. The IDs must be unique so each has a different number.
href=""
The URL for the link, so that if clicked, it goes somewhere.
target="_blank"
Opens the link in a new tab

The popup text is included in the <a> element, within a <span> element. This has a class attribute, which connects to the Javascript. It also has the ARIA role="tooltip"

So here is an example of the HTML.

<p>This is the <a class="tooltip" id="tooltip1" href="#tooltip1">trigger<span class="popup" role="tooltip">And this additional text 
gives additional context on the trigger term</span></a>.</p>

Javascript

I'm going to start with the full Javascript and then we'll look at some of the questions related to the actual criterion.

const tooltips = document.querySelectorAll("#tooltip1, #tooltip2, #tooltip3");

tooltips.forEach((tooltip) => {
	
	tooltip.onmouseover = function() {
	const popup = tooltip.querySelector(".popup")
	popup.style.display = "block";
	}

	tooltip.onmouseout = function() {
	const popup = tooltip.querySelector(".popup")
	popup.style.display = "none";
	}
	
	tooltip.onfocus = function() {
	const popup = tooltip.querySelector(".popup")
	popup.style.display = "block";
	}
	
	tooltip.onblur = function() {
	const popup = tooltip.querySelector(".popup")
	popup.style.display = "none";
	}
	
	document.addEventListener('keydown', (e) => {
	if ((e.keyCode || e.which) === 27)
	{
	const popup = tooltip.querySelector(".popup")
	popup.style.display = 'none';
	}
	})
});

How do you make such content appear?

In the Javascript example above, there are two bits that make content appear:

tooltip.onmouseover = function() {
	const popup = tooltip.querySelector(".popup")
	popup.style.display = "block";
	}
tooltip.onfocus = function() {
	const popup = tooltip.querySelector(".popup")
	popup.style.display = "block";
	}

These change the display settings of the <span> element from none to block, when either the mouse hovers over (onmouseover) or when the keyboard focus is on it (onfocus).

How do you make such content dismissable?

The dismissable bit is the last part of the Javascript. We want the user to be able to hit the Esc key to get rid of the popup. The code for this is:

document.addEventListener('keydown', (e) => {
	if ((e.keyCode || e.which) === 27)
	{
	const popup = tooltip.querySelector(".popup")
	popup.style.display = 'none';
	}
	})

How do you make such content hoverable?

Making the additional content hoverable means that when the mouse moves off the original item and onto the additional content, it remains visible. If, like me, you use a large pointer, additional content can be hidden by it, so it's important to be able to move the pointer without losing the content.

By using onmouseover and onmouseout, the additional content is triggered and remains as long as the pointer is over the original link or the additional content.

How do you make such content persistent?

In a similar way to making the content hoverable, it will be persistent if the Javascript uses onmouseover with onmouseout, and onfocus with onblur.

Clicky