Tooltips provide a simple way to: contextually add explanatory notes, elaborate on a linked phrase, provide feedback to a user, et cetera.



The stand-alone demo can be found here.



Figure 1 (below) shows what our tooltips will look like based on a basic HTML, CSS and JavaScript implementation outlined in Figure 2 (also below).

The HTML, CSS and JavaScript provided in Figure 2 (below) are fairly straightforward.

A couple of things to note about the JavaScript:

- It is concise, native JavaScript and does not rely on any frameworks.

- Supports touch events for mobile devices, as well as ensures the tooltips are not hidden offscreen.



I really hope you enjoy the write-up and the tooltips!

Figure 1: tooltips provide a simple way to contextually place explanatory notes, elaborate on the linked phrase, etc.