UX/UI Hotspots - A Key Part of Your User Onboarding Flows

Most guides to UX hotspots stop at "a pulsing dot that draws attention". The harder questions are when a hotspot is better than a tooltip, how many to show at once, and when to stop the animation. The last one has a formal answer: under WCAG success criterion 2.2.2 (Pause, Stop, Hide), anything that moves or blinks on its own for more than five seconds, alongside other content, needs a way to pause, stop or hide it.

This post sorts out what "hotspot" means, gives rules for using one in onboarding, and walks through real examples and the ways to build one.

What is a hotspot in UI?

A UX hotspot (also called a beacon) is a small visual marker, usually a dot or ring that pulses, placed on one element to signal that there's something to learn there. It doesn't block the interface or interrupt what the user is doing; it waits for a click, which opens a tooltip or a short message.

The word covers three different things, which is why search results disagree:

The first two are design patterns and this post covers both. The third is a measurement, not something you design.

When should you use a hotspot instead of a tooltip?

Use a hotspot when the information is optional: the user can carry on without it, and it's fine if they open it later or never. Use a tooltip on its own when the user needs the information to take the next step.

A quick way to decide:

• Required for the next step: show a tooltip directly, as part of a flow.
• Useful but optional: put a hotspot on the element and open the tooltip on click.
• News about one element (a new button, a moved menu): a hotspot, which is quieter than an announcement modal.
• News about the whole product: a modal, banner or email; a hotspot has nothing to point at.
• Several things worth exploring on one screen: a few hotspots at once, so users pick their own order.

What do onboarding hotspots look like in real products?

Our inspirations library has several products that used onboarding hotspots well. Each is described as it was at the time of the screenshot:

Two lessons repeat. The well-made hotspots pulse slowly or not at all, and they appear in a handful of places, not on every element.

What are the rules for a good onboarding hotspot?

A good onboarding hotspot is small, rare, brief in its animation, and gone once it has done its job. These rules follow from the examples above and from accessibility requirements:

1. Point at one element. The hotspot sits on, or right next to, the thing it explains.
2. Show a few at a time. Three to five on a screen is plenty, as in Typeform's editor; one per screen is right for an announcement.
3. Stop the pulse within five seconds. Pulse a few times, then stay still, so you meet WCAG 2.2.2 (Pause, Stop, Hide). Respect users' reduced-motion setting by not animating at all.
4. Open on click or tap, not hover. Touch screens have no hover, and a tooltip that appears on hover vanishes when the pointer slips.
5. Disappear once opened. A hotspot the user has already opened shouldn't come back on the next visit.
6. Make it reachable by keyboard. The marker should be a focusable button with a label (for example, "What's new: automation"), not a decorative dot.
7. Keep the tooltip short. One sentence and one button, the same as any onboarding tooltip.

Where else are hotspots used?

Image hotspots are the same idea applied to a picture: points on an image that reveal information when clicked. They're common in teaching, online shops and data visualisation.

Online courses and e-learning

Educators and course creators use hotspots to let students uncover the information hidden in a text, image or photograph, one point at a time. Combined with drag and drop, hotspots can also become exercises: students place the right word, phrase or image on the right spot. The point is to make learning active, so students test what they know rather than only reading.

Product presentation

 

Online shops place hotspots on product photos so that each feature is explained where it appears: the camera, the screen, the processor. This keeps long blocks of specification text off the image and lets shoppers open only the details they care about.

Product bundles that take less space

 

Hotspots also work as links on a single image of several products, as in "shop the look". Each hotspot opens one item, and a click can suggest related products, like a "people also buy" section. You can also use one image of a product with hotspots for its variants (size, colour, length) instead of a grid of near-identical photos. Either way, one image replaces several product cards, which leaves room to build a page around a theme or a season.

Explaining charts and infographics

Infographics explain complicated things with shapes and figures, but small charts leave no room for text. Hotspots let you attach each explanation to the right point on the chart, so readers connect the number and the note without squeezing paragraphs into the graphic.

How do you create a hotspot?

You can create a hotspot by coding it yourself, by adapting a library, or with a no-code onboarding tool. The choice depends on whether you have developer time and how often the hotspots will change.

1. In-house development

Your own designers and developers build the hotspot from scratch. You get full control over how it looks and behaves, and you talk to the people building it directly. The cost is time: every new hotspot, copy change or targeting rule needs a developer, and you'll build the logic that remembers who has already opened it.

2. Low-code libraries

JavaScript libraries give you ready-made hotspot code to adapt, which is quicker than starting from zero but still needs a developer. For example, this hotspot library is built for the Vue framework. Our guide to onboarding flows with open-source libraries covers others for tours and tooltips.

3. No-code tools

Onboarding tools let product and marketing teams place hotspots with a visual editor, with targeting and analytics built in. Their names for the pattern vary. These three list hotspots or beacons on their product or pricing pages:

Prices and ratings were read from each tool's pricing page and G2 on 19 October 2026. For the rest of the market, see all our tool reviews.