What is a hotspot? In-app guidance element explained
You added a feature your users asked for. A month later, support tickets say nobody can find it. A modal would interrupt everyone. A tooltip only appears on hover, which is invisible on mobile. What you need is a hotspot.
npm install @tour-kit/core @tour-kit/hintsDefinition
In onboarding UX, a hotspot is a small pulsing visual indicator placed on a UI element to draw attention without blocking the user's workflow. Unlike modals or guided tours, hotspots are opt-in: the user clicks or taps the beacon to reveal guidance content, and ignores it otherwise. UserGuiding defines it as "a UX/UI pattern that aims to draw a website/app user's attention to a specific area or spot on the screen" (UserGuiding). Every major onboarding platform, as of April 2026, ships hotspots as a core pattern.
"Beacon" and "hotspot" get used interchangeably, but they're different things. The beacon is the animated dot. The hotspot is the full pattern: beacon plus the tooltip it reveals on interaction.
How hotspots work
Every hotspot implementation has three moving parts: a trigger element (the 12-16px pulsing beacon), content (a tooltip or popover with 1-2 sentences of guidance), and a lifecycle system that tracks whether the user has seen and dismissed the hint across sessions.
Clicking the beacon expands a tooltip positioned relative to the target element. That tooltip must follow WCAG 2.1 SC 1.4.13: dismissible via Escape, hoverable without disappearing, persistent until closed (W3C WAI-ARIA). Sarah Higley puts it bluntly: "do not use a timeout to hide the tooltip" (sarahmhigley.com).
Positioning is the hard part. Beacons need to stay anchored through scrolls, resizes, and layout shifts. Most use Floating UI or a comparable engine. Tour Kit's @tour-kit/hints recalculates position without re-rendering the React tree.
The lifecycle works as a state machine:
- Idle: beacon visible, pulsing
- Active: user clicked, tooltip open
- Dismissed: user closed, persisted to storage
- Retired: engagement threshold hit, hotspot removed
Hotspot examples
Hotspots appear across SaaS dashboards, e-commerce, and developer tools. Here are five real-world patterns from production apps, each mapping to a different stage of the user journey:
- Feature discovery. SendGrid places hotspots on new dashboard elements. Users who care click through; everyone else keeps working.
- Contextual onboarding. Typeform uses beacons during first-run to introduce the form builder without a forced walkthrough.
- New feature announcements. Plandisc adds pulsing indicators for timeline features, auto-retiring after 30 days.
- Purchase guidance. Cuepath positions hotspots near checkout CTAs with 44x44px touch targets (the WCAG 2.5.8 minimum).
- Supplementary help. Krispy Kreme links hotspots to "learn more" content, keeping the primary ordering flow clean.
Hand-coded implementation takes 1-5 hours depending on positioning complexity (UserGuiding). With a headless library like Tour Kit, under 30 minutes.
Hotspots vs tooltips vs modals
Choosing between hotspots, tooltips, and modals comes down to how urgently the user needs the information and whether you can afford to interrupt their workflow. Hotspots are the least intrusive of the three, sitting at zero cognitive load until the user opts in.
| Aspect | Hotspot | Tooltip | Modal |
|---|---|---|---|
| Trigger | Click or tap | Hover or focus | Page load or event |
| User opt-in | Yes (must click beacon) | Partial (appears on hover) | No (blocks workflow) |
| Mobile support | Good (tap-friendly) | Poor (no hover on touch) | Good (if responsive) |
| Content depth | 1-2 sentences + CTA | 1 sentence max | Paragraphs, media, forms |
| Interruption level | None until clicked | Low | High (blocks entire page) |
| Best for | Feature discovery | Label clarification | Critical announcements |
Hotspots signal "there's something here" without demanding attention. UX Myths research found less than 20% of page copy gets read (UX Myths), which makes opt-in patterns more effective than walls of text.
Why hotspots matter for onboarding
Feature adoption is where most SaaS apps lose users: you build something useful, nobody notices it, and the feature sits unused while support tickets pile up. Hotspots solve discovery without the friction that makes users close a tour after step one.
They work for ongoing guidance too. Shipped a new widget? Add a hotspot that disappears after one click. Whatfix reports in-context enablement makes end users 82% more confident navigating new features (Whatfix). Keep beacon colors above the 4.5:1 WCAG contrast minimum so the indicator is visible to everyone.
Three rules before you add hotspots everywhere:
- Cap density at 2-3 per view. More creates visual noise. Queue the rest.
- Persist dismissals. If closed, don't show again. Use localStorage or your backend.
- Respect
prefers-reduced-motion. Swap the pulse for a static dot when users opt out of animation.
Hotspots in Tour Kit
Tour Kit's @tour-kit/hints package provides headless hotspot components. You control the rendering; the library handles positioning, keyboard navigation, ARIA attributes, and dismissal tracking.
// src/components/FeatureHotspot.tsx
import { HintHotspot, HintTooltip } from '@tour-kit/hints';
export function FeatureHotspot() {
return (
<HintHotspot
targetSelector="#new-export-button"
hintId="export-feature-2026"
dismissible
>
<HintTooltip side="bottom" sideOffset={8}>
<p>Export your data as CSV or JSON.</p>
<button onClick={() => console.log('CTA clicked')}>
Try it now
</button>
</HintTooltip>
</HintHotspot>
);
}The hintId ties to Tour Kit's storage adapter, so dismissed hotspots stay dismissed across sessions. Beacon animation respects prefers-reduced-motion by default. The tooltip follows WCAG 1.4.13: Escape dismisses, hovering keeps it open, no timeouts.
Honest limitation: Tour Kit requires React 18+ and has no visual builder. You write JSX, not drag and drop. For teams that need a no-code editor, UserGuiding or Chameleon are better fits. For code-owned guidance integrated into a design system, that's the point of headless.
Get started at usertourkit.com/docs, or see the hotspot tutorial for a full implementation walkthrough.
FAQ
What is the difference between a hotspot and a tooltip?
A hotspot combines a visual beacon with a tooltip that appears on click. Standalone tooltips appear on hover or focus without any indicator. The key difference: hotspots are opt-in and work on touch devices, while tooltips rely on hover, which doesn't exist on mobile. Tour Kit's @tour-kit/hints supports both patterns.
Are hotspots accessible?
Yes, when implemented correctly. The beacon needs keyboard focus and an aria-label. The tooltip must be dismissible via Escape, hoverable without vanishing, and persistent until closed per WCAG 2.1 SC 1.4.13 (W3C). Pulse animations should respect prefers-reduced-motion.
When should I use a hotspot instead of a product tour?
Use hotspots for single-feature discovery where the user doesn't need sequential steps. A product tour walks users through a multi-step workflow in order. A hotspot says "hey, this button exists" and lets the user engage on their own terms. Combine both: use tours for first-run onboarding and hotspots for ongoing feature announcements.
How many hotspots should I show at once?
Two to three per view is the practical ceiling. More creates visual clutter and splits attention. Queue extras: show two now, reveal the next pair after the user interacts with the first batch. Tour Kit's scheduling package supports this progressive disclosure pattern.
Related articles
What is a product tour? (definition, types, and examples)
Learn what a product tour is, how it works technically, and when to use each type. Covers tooltips, hotspots, modals, and walkthroughs with code examples.
Read article
What is a slideout? In-app messaging element explained
Learn what a slideout is, how it differs from modals and drawers, and when to use slideout panels for in-app messaging and onboarding.
Read article
What is a tooltip? (and when to use tooltips in product tours)
A developer's definition of tooltips covering ARIA patterns, WCAG 1.4.13, the four tooltip types, and how tooltips work inside product tours.
Read article
What is AGPL? Why license choice matters for open-source libraries
Learn what the AGPL license requires, how it differs from MIT, and why it matters when picking open-source JavaScript libraries. Includes real examples.
Read article