Tooltip

Hints on a string, not stuck to the page.

A tooltip that hangs from its target. It grows out of the element, trails a beat behind when the target moves, and the string sways with the pull before everything settles. Placement flips and slides to stay on screen.

Hover, focus or drag

Weekly report Drag me around

Feel

Card tip side String length 44 px Stiffness 150 Damping 14

Use it

<link rel="stylesheet" href="tether.css">
<button data-tether="Insert link · ⌘K" aria-label="Link">↗</button>

<script type="module">
  import Tether from './tether.js';

  Tether.mountAll();                         // every [data-tether]

  const tip = new Tether(document.querySelector('#help'), {
    content: document.querySelector('#rules').content.cloneNode(true),
    placement: 'right',
    interactive: true,
  });
</script>