Features / In-app Tooltips
In-app tooltips
In-app Tooltips — Contextual Help Anchored to Any UI Element
Persistent indicators anchored to any element in your app. Hover or click opens a popover with the explanation, the link, or the tour — no modal takeover, no docs site, no engineering.
$19/mo flat — no per-user pricing. No credit card required.
Last updated: August 2026
Indicators
Five ways to mark the spot
Match the visual weight to the moment. Every indicator takes your own color and a size from 8 to 96 pixels, so it reads as part of your UI rather than a bolt-on.
- Billing threshold
Question mark
The quiet one. Beside a field, label, or setting whose meaning isn't obvious from the words alone.
- Activation rate64%
Info
Same weight, softer prompt. Good on metric tiles and column headers, where the question is “how is this calculated?”
- Profile
- Workspace
- API keys
Dot
A colored disc, no glyph. Marks a row as worth a look without competing with your own UI.
- Export
Pulse
The dot plus an expanding ring. For the feature nobody finds — motion earns the glance a static icon doesn't.
- Reports
- Automations
- Settings
Badge
A short text pill — NEW, BETA, AI — up to 16 characters. The one to reach for on launch day.
Definition
What are in-app tooltips?
In-app tooltips, also called contextual help indicators, are persistent UI elements — icons, dots, pulses, or NEW badges — anchored to specific elements inside a product. Each tooltip opens a popover with a short explanation, a link, or a button that starts a guided tour.
Unlike modals, tooltips don't interrupt. Unlike browser-native tooltips, they're audience-targeted, frequency-capped (show once per visitor), themed to your brand, and measured per-tooltip.
This is what Nielsen Norman Group calls a pull revelation — help that responds to user intent rather than interrupting it. Push revelations (like uninvited modals) get dismissed. Pull revelations get opened.
The problem
Why your best features go unnoticed
- A changelog email that lands in a promotions tab and goes unopened.An indicator that lives on the feature itself, waiting on the page until someone looks.
- A launch modal that gets dismissed in under two seconds.A popover that opens on the user's move, not yours — help that responds to intent instead of interrupting it.
- A tooltip library: a DOM hover-effect with no idea who the user is.The same audience rules your tours use — plan, role, URL, or any attribute you pass in.
- No way to know whether anyone read it.Viewed, opened, dismissed, and CTA-clicked, tracked per tooltip out of the box.
You shipped a feature on Friday. Monday morning, support tickets pile up asking where to find it. Your best work is invisible — not because users don't care, but because nothing on the page tells them it exists. This isn't theory: Nielsen Norman Group's research finds that tutorial walls and modal takeovers get skipped by most users, while help anchored to specific UI elements earns higher engagement and retention. Tooltips work alongside feature adoption tours and user onboarding flows, not against them.
Trigger
Hover or click — set per tooltip
Hover is the default. A quiet ? beside a form field should answer on the way past; a launch announcement should wait for a deliberate click.
- Hover keeps a bridge open
- The popover opens after a short delay and stays open while the pointer travels from the indicator onto the popover itself — so a user can actually reach the CTA instead of watching it vanish halfway there.
- Touch and keyboard always work
- Hover is gated on the device actually having a hover pointer; phones and tablets tap instead. The indicator is a real button, so Enter and Space open it and it takes focus in tab order.
- Dismissal counts differently
- On a click tooltip, clicking away is a dismissal — it records the event and applies show-once capping. On a hover tooltip, moving the pointer away is just a close; only the explicit × counts. Turn the × off entirely and the tooltip stays put for good.
Capabilities
What in-app tooltips can do
Everything below is configured in the dashboard and takes effect without an app deploy.
Anchored to any element
Point and click on your live site, or paste a CSS selector. The tooltip follows that element across SPA route changes. If a selector matches more than one element, StepsKit refuses to guess and tells you instead of attaching to the wrong node.
Placement and offsets
Put the indicator on any side — auto, top, right, bottom, or left. Auto tries top, then right, bottom, and left, picking the first that fits. Nudge it with pixel offsets up to ±200 when your own UI is in the way.
One CTA, three actions
The popover carries a single button: link to a doc or external URL, start one of your product tours, or fire a custom window event your app handles however it wants. Solid, outline, or link style, in three sizes, aligned left, center, right, or full-width.
Targeting and screen size
Show by plan, role, company, or any custom attribute you pass via the embed — twelve operators combined with AND/OR — plus URL-pattern globs and a minimum screen width so a tooltip never crowds a phone.
Show once per visitor
Cap a tooltip to one appearance when one chance is enough. Identified visitors are capped across sessions server-side; anonymous visitors fall back to session storage, so nobody gets pestered either way.
Theme it to your brand
Popover background, text, and button colors; title and body font size; title and body alignment. Set project-wide defaults for every tooltip, then override any single one. No CSS required — but the embed exposes class names if you want them.
Measure & ship
Prove it works, without a second install
Per-tooltip analytics
Four events per tooltip — viewed, opened, dismissed, CTA-clicked — rolled up into open rate, dismiss rate, and CTA click rate. See which tooltips drive action and which get ignored, without wiring up your own analytics.
<script
async src="https://cdn.stepskit.com/stepskit.latest.js"
data-api-key="sk_live_a3f...">Rides the same embed
Tooltips ship in the same payload as your tours. No separate install, no extra package, no extra network request — if StepsKit is already on your site, you already have tooltips.
How it works
Four steps, no engineering handoff
Anchor, style, and publish from the dashboard. The visual editor previews the real popover as you type.
- 1
Add a tooltip in the dashboard
Start with a name and a URL pattern — or a wildcard for everywhere. Tooltips live in the same dashboard as your tours.
- 2
Anchor it to any element
Open the visual element picker on your live site, or paste a CSS selector. The tooltip follows that element across SPA navigations.
- 3
Pick an indicator and a CTA
Choose one of five indicator styles, set its color and size, and decide whether the popover opens on hover or on click.
- 4
Publish to your domain
Roll out to the domains you choose. Tooltips appear for users who match your targeting rules — instantly, no app deploy.
Saved views, live now
Save any filtered view and reload it in a click.
Built for real apps
The part tooltip libraries skip
Anchoring an element is the easy half. Keeping it anchored while a React app re-renders underneath is the half that breaks.
- Survives your SPA
- A MutationObserver re-resolves the selector when your app swaps the DOM, so the indicator keeps tracking the right element across route changes. If the anchor isn't rendered yet, the tooltip waits for it rather than giving up. You never re-initialize the embed on navigation.
- Refuses to guess
- If a selector matches more than one element, the tooltip renders nothing and reports the ambiguity back to your dashboard — with an email — instead of silently attaching to whichever node happened to come first.
- Glued to the element
- A ResizeObserver plus capturing scroll and resize listeners keep the indicator pinned as your layout moves. If the anchor is hidden, the indicator hides with it rather than stranding itself in a corner.
- Safe by default
- Titles and body copy pass a sanitizer allow-list before they touch the DOM. CTA URLs are re-validated at click time against an https / http / mailto / tel allow-list and open with noopener.
Examples
In-app tooltip examples
Three moments where an anchored indicator beats an email, a modal, or a help-center article.
- Reports
- Automations
- Settings
Announce a feature without a modal
Put a NEW badge on the sidebar item you just shipped. When a user clicks, the popover explains what changed and links to your launch post — without interrupting whatever they were doing.
Explain a confusing field
Drop a ? icon next to the form field your support team keeps explaining. The popover answers the question inline, the way a doc link never quite does.
Surface a feature users miss
Add a pulsing dot to the menu item nobody clicks. The popover shows them what the feature does and starts a tour walking through it — turning a blind spot into adoption.
Choosing a surface
Tooltips vs. tours vs. announcements
StepsKit ships three in-app surfaces, each for a different job — a guided sequence, a broadcast, or persistent contextual help.
Tours
Tooltips
Announcements
| Surface | Sequential? | Anchored? | Use when |
|---|---|---|---|
| Tours | Yes | Per-step | Walking a user through a workflow in order |
| Tooltips | No | Per-element | Persistent contextual help that waits for the user |
| Announcements | No | Banner / modal | Broadcasting a launch to every user at once |
Pick tourswhen there's a workflow to learn — a multi-step onboarding flow or a setup wizard that has to run in order. Announcementswhen a launch affects everyone and you need attention now — they interrupt, so spend them carefully. And tooltipswhen the help belongs next to the thing itself: the field being filled, the menu item being missed. Tooltips don't interrupt. They wait until the user is ready to ask.
AI agents
Author tooltips from your codebase
StepsKit ships an MCP server, so an agent that can already read your components can write the tooltips that point at them.
Claude Code, Cursor, and any other MCP client can create, list, read, update, and delete tooltips — picking real selectors out of your own JSX instead of guessing at them. Agents create tooltips unpublished, so nothing reaches your users until you publish it in the dashboard.
$ npx -y @stepskit/mcp
✓ StepsKit MCP connected
> point out the new CSV export
✓ Tooltip created on #export-btnStop losing users before they see the value
Build your first tour in 5 minutes. No engineering ticket, no credit card required.