Web
Web · Elastic tooltip
Tether
A tooltip hung on an elastic string.
A tooltip that hangs from its target on an elastic string. It grows out of the element, trails a beat behind when the target moves, and the string sways before everything settles.
Demo
A recording of the demo. Open it in a new tab
What it does
- 01
The bubble follows its anchor on a spring; the string is a live curve
- 02
Picks the side with room and flips when the viewport runs out
- 03
Hover, focus, pinned and interactive modes
- 04
Wired with aria-describedby; Escape closes it
Use it
git clone https://github.com/YagnikBarasiya23/tether-tooltip.git
# copy tether.js and tether.css into your project<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]; data-placement sets the side
</script>Every option, the technique behind the motion and the accessibility notes are in the README on GitHub
More components
All 10- Flutter
Get in touch
Open for freelance projects, contract roles and collaborations — mobile apps and full-stack products in particular. WhatsApp gets the fastest reply.
- Phone
- +91 70488 09875
- Based in
- Rajkot, Gujarat, India
- Elsewhere