Using CSS variables & transforms for tooltips that track the mouse.

This page demonstrates the use of CSS Variables in creating tool-tips. A feature of this approach is minimizing both additional page content and additional processing.

Each paragraph that looks like this has a tooltip.

A single element is used to present the tooltip content. This element is moved relative to the mouse pointer using a CSS3 transformation. The transformation uses CSS variables that are initialised to (0,0) using css variables.

Please hover over me noticing that this text has two different tooltips.

Obviously this doesn't work on mobile … unless you plug a mouse in … did you know you can do that if you have a USB-C port?