tinytooltip/index.html at master · portsoc/tinytooltip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>TinyToolTip</title>
<script type="module" src="index.js"></script>
<link rel="stylesheet" href="style.css">

<h1>Using CSS variables &amp; transforms for tooltips that track the mouse.</h1>
<p>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.</p>

<p data-tip="This is a tooltip.">Each paragraph that looks like this has a tooltip.</p>

<p data-tip="Tooltips are just text.">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.  </p>

<p data-tip="This is the tooltip that shows for the main paragraph">Please hover over me <span data-tip="... and this tooltip shows in the middle of the paragraph">noticing that this text</span> has two different tooltips.</p>

<p>Obviously this doesn't work on mobile &hellip; unless you plug a mouse in &hellip; did you know you can do that if you have a USB-C port?</p>