Tooltip 1.0

Changelog

This is a tooltip. Tooltips can exist within p tags, but typically need to contain paragraphs themselves. However, if any element which is block level by default is put inside a p tag, it forces the p tag to close. To get around this, a span class="p" tag can be used to emulate the styles of a p tag. Tooltips can also contain elements that can receive focus, such as links.

It's also possible to create a block tooltip. Block tooltips are wider than standard tooltips, and appear beneath their trigger with the same indentation as the rest of the content.

These tooltips work without JavaScript, because they rely on the :hover, :focus, and (where supported) :focus-within pseudoclasses.

The disadvantage of not using JavaScript is that the tooltips can't detect how close they are to the edge of the page. If they are near enough to the right hand edge of the window that they don't fit, the page width will increase to accommodate them, causing a horizontal scrollbar to appear.

It's best to avoid putting tooltips close enough to the bottom of the window that their content can't fit, since this can cause the page to jump back and forth.

If JavaScript is present, the tooltips will improve their functionality slightly. Pressing the Escape key while one is open will close it (see WCAG 2.1 success criterion 1.4.13 - Dismissable)