Overview
A lightweight JavaScript tooltip module for displaying contextual hints on any DOM element, with no framework dependency.
Features
- Minimal footprint
- Attach tooltips to arbitrary DOM elements
- Vanilla JavaScript, zero dependency
- Optional arrow — hide it per‑tip with
data-tip-arrow="false"or everywhere with--jizy-tooltip-arrow-size: 0 - Stays on screen — flips to the opposite side when there is no room, then shifts to keep clear of the viewport edge
Installation
npm install jizy-tooltipExample
Lightweight tooltip driven by data-tip attributes, shown via a reused singleton element. data-tip-position is a preference: the tip flips to the opposite side when there is no room, then shifts along the other axis to stay inside the viewport. The arrow follows, still pointing at its trigger.
Top
Bottom
Left
Right
The arrow is optional: set data-tip-arrow="false" on a single trigger, or --jizy-tooltip-arrow-size: 0 to remove it everywhere. Placement still applies.
No arrow (top)
No arrow (left)
Header + body
Longer body
A second instance whose tip element carries .jtip-blue re-themes via CSS vars — no rebuild:
Hover me (themed)
Themed header