Featherweight tooltips with 12 auto-flipping placements, hover/focus/click triggers, arrow rendering, interactive content and follow-cursor mode.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-tooltip/latest/gs-tooltip.min.css"> <script src="https://cdn.get-set.it/gs-tooltip/latest/gs-tooltip.min.js"></script>
import Tooltip from '@get-set/gs-tooltip'; export default function App() { return ( <Tooltip> <div className="content">Your Tooltip content</div> </Tooltip> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| content | string | '' | Tooltip content. Plain text by default; pass `allowHTML` to render markup. |
| allowHTML | boolean | false | Treat `content` as raw HTML instead of escaped text. Default: false. |
| placement | GSTooltipPlacement | 'top' | Preferred placement (12 RTL-aware variants). Default: 'top'. |
| flip | boolean | true | Auto-flip to the opposite side on viewport collision. Default: true. |
| shift | boolean | true | Shift along the side to stay in the viewport on collision. Default: true. |
| boundaryPadding | number | 8 | Padding (px) kept between the tooltip and the viewport edge. Default: 8. |
| offset | GSTooltipOffset | none | Skidding / distance offset from the reference. |
| trigger | GSTooltipTrigger | 'hover focus' | How the tooltip opens. Default: 'hover focus'. |
| showDelay | number | 0 | Delay (ms) before showing. Number = both; object = per phase. Default: 0. |
| hideDelay | number | 0 | Delay (ms) before hiding. Number = both; object = per phase. Default: 0. |
| delay | number | { show?: number; hide?: number } | none | Combined delay shorthand: number applies to both, object sets each. When set, overrides `showDelay`/`hideDelay`. |
| hideOnClick | boolean | true | Hide when the reference (or document) is clicked. Default: true. |
| interactive | boolean | false | Keep the tooltip open while the pointer is over it. Default: false. |
| interactiveBorder | number | 6 | Extra hover-bridge padding (px) for `interactive` tooltips. Default: 6. |
| followCursor | GSTooltipFollowCursor | false | Follow the cursor while hovering. true | 'horizontal' | 'vertical' | 'initial' | false. Default: false. |
| touch | boolean | 'hold' | true | Enable touch support (long-press / tap). true | false | 'hold'. Default: true. |
| animation | GSTooltipAnimation | false | 'fade' | Entrance/exit animation name. `false` disables motion. Default: 'fade'. |
| animationDuration | number | { enter?: number; exit?: number } | 200 | Animation duration in ms. Number = both; object = per phase. Default: 200. |
| animationEasing | string | 'cubic-bezier(.16,1,.3,1)' | CSS easing for the animation. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor prefers-reduced-motion. 'auto' | true | false. Default: 'auto'. |
| arrow | boolean | true | Show the pointing arrow. Default: true. |
| arrowSize | number | 8 | Arrow size in px. Default: 8. |
| theme | GSTooltipTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent / background color (CSS var --gst-bg). |
| maxWidth | number | string | 300 | Max width. Number = px; string = raw CSS. Default: 300. |
| zIndex | number | 9999 | z-index of the floating tooltip. Default: 9999. |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| customClass | GSTooltipCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the tooltip box. |
| appendTo | HandlerTarget | 'body' | 'parent' | 'body' | Element to append the floating tooltip to. selector | HTMLElement | 'body' | 'parent'. Default: 'body'. |
| disabled | boolean | false | Start disabled (no triggers fire until enabled). Default: false. |
| aria | boolean | true | Wire `aria-describedby` on the reference to the tooltip. Default: true. |
| hideOnScroll | boolean | true | Hide when the reference is scrolled out of view. Default: true. |
| sticky | boolean | true | Reposition on scroll/resize while open. Default: true. |
| target | HandlerTarget | none | Explicit reference element(s). Defaults to the element the plugin is constructed on (native) or the wrapped child (React). |
Every side and corner, with viewport auto-flip.
Hover, focus and click activation.
Optionally track the pointer as it moves.
Hoverable, clickable rich tooltip content.