easy-tooltips

A lightweight, zero-dependency tooltip library using modern JavaScript and CSS.
Just add data-tooltip to any element! No setup or config required.


Live Demo

Features

* No dependencies
* Works with both mouse and touch
* Customizable via CSS variables
* Automatically repositions and shifts to fit the screen
* Smooth, non-interrupting animations (no flicker on rapid hover)
* Compatible with Vue, React, Svelte, and more

Quick Start

$3

``bash
npm install easy-tooltips
`

`js
import "easy-tooltips/styles.css"
import "easy-tooltips"
`

$3

https://www.jsdelivr.com/package/npm/easy-tooltips

$3

`html
Save
Username *

Info

`

No additional setup is needed for Vue, React, Svelte, or other frameworks! Tooltips automatically update when the element updates!

Advanced Usage

$3

You can render custom HTML inside a tooltip using data-tooltip-src. The value can be either a CSS selector or the literal keyword next.

The matched element's content is copied into the tooltip.

Using a CSS selector
Point to any element in the document.
`html
Shipping info

`

Using next
Use next to automatically pull content from the next DOM element.
The source element is automatically hidden.
`html
Ingredients



`

$3

For styling specific tooltips:
`html
Save
`

`css
#save-button {
--tooltip-background: #28a745;
--tooltip-border-color: #1e7e34;
}
`

Customization

You can style tooltips using CSS variables (recommended) or by targeting the tooltip classes directly. Note that some CSS variables are required for proper positioning:

`css
:root {
/ Tooltip appearance /
--tooltip-background: #fff; / Background color /
--tooltip-border-color: #aaa; / Border color /
--tooltip-border-size: 1px; / Border thickness /
--tooltip-max-width: 100%; / Maximum tooltip width /

/ Positioning (required for JS positioning) /
--tooltip-vertical-distance: 16px; / Distance from trigger element /
--tooltip-viewport-padding: 16px; / Minimum distance from screen edges /
--tooltip-arrow-size: 12px; / Size of the arrow /
--tooltip-arrow-edge-buffer: 12px; / How close the arrow can get to the edge of a tooltip /
--tooltip-arrow-radius: 0; / Border radius of the arrow /

/ Animation (required for JS timing) /
--tooltip-animation-length: 0.15s; / Duration of fade animation /
--tooltip-delay: 0.15s; / How long before the animation starts /
}
``

How it works

Easy-tooltips uses a smart positioning system that:

1. Detects viewport boundaries - Automatically positions tooltips above or below elements
2. Handles edge cases - Shifts tooltips horizontally when they would overflow the screen
3. Manages animations - Queues tooltip updates to prevent conflicts

License

MIT © Ewan Howell