tipglide

Available since 0.3.0 for React, Vue, Svelte, Angular, Solid, Preact and Astro. Each group owns one shared tooltip. Added, removed and changed data-tip triggers are tracked automatically; the framework owns setup and cleanup. Importtip-glide/style.css once. The Astro component includes it. Frameworks are optional peers, so install only the one you use.

Full adapter reference

Adapters accept the core options plus boundary: 'root'to confine the tooltip to the group. alwaysVisible: trueshows the first nonempty trigger on mount and when that trigger changes. It is useful for touch previews; Escape and normal dismissal still work. In Astro, options must be JSON-serializable, so pass a root boundary rather than a DOM element.

Adapter options replace the configuration: omitted fields return to their defaults. The imperative core's update() merges only the supplied fields. Invalid values throw before applying an update.

Choose a side or any angle in degrees. 0 is above; 90 is right. Angles turn clockwise, like a compass. At an edge, the surface slides along the boundary and finds room around the trigger. Setboundary: element to stay inside its client box and the visible viewport.

Glide defaults to 180 ms. Lean adds a small directional tilt; showFuse shows the initial delay on the edge facing the tooltip. Rapid handoffs retarget the current position and size. Keyboard focus is instant and system reduced motion is respected.

The first hover waits 400 ms. Closing waits 120 ms so you can cross a gap or reach the tooltip. For 600 ms after closing, another trigger skips the opening delay. Set these values in milliseconds; keyboard focus opens immediately. motion: 'system' follows reduced motion preferences, while 'reduced' disables spatial motion explicitly.

The pointer is part of the same rounded contour. Arrow is optional; arrowBlend controls its geometric-to-liquid join. Enter and exit accept'scale' | 'fade' | 'slide' | 'none', or{ keyframes, duration, easing }. Custom motion runs on a separate layer, so it can coexist with gliding and resizing.

Text wraps, including unbroken words. Tall descriptions scroll within the tooltip. Theme its background, color, radius, font, padding, shadow, and size with CSS variables on a class supplied through className. Descriptions stay plain text.

createTipGlide(root, options) registers the initial triggers. Use add(element, text) for later additions or text changes; it returns an unregister function. Re-registering dismisses that trigger's current tooltip. show(element) and hide()control visibility. update(options) merges settings andreposition() remeasures after your layout changes. Call destroy() when the owning view is removed. Framework adapters handle registration and destruction for you.

Import createTipGlide from tip-glide/basewith tip-glide/base.css for basic shared tooltips. It supports top, right, bottom and left placement, with the same core lifecycle. Use the full entry and its adapters for 360° placement, liquid arrows, lean, fuse and custom entrance or exit animations.