# In-app Tooltips: Contextual Help for SaaS Apps > In-app tooltips are persistent indicators — a question mark icon, an info icon, a dot, a pulse, or a NEW badge — anchored to a specific UI element. Clicking one opens a popover with a short explanation, a link, or a button that starts a product tour. They are audience-targeted, frequency-capped, themed, and measured per tooltip. *Source: https://stepskit.com/features/tooltips* ## Definition In-app tooltips (also called contextual help indicators) are persistent UI elements anchored to specific elements inside a product. Unlike modals, they don't interrupt. Unlike browser-native tooltips, they carry targeting, frequency capping, theming, and per-tooltip analytics. Nielsen Norman Group calls this a [pull revelation](https://www.nngroup.com/articles/pop-up-adaptive-help/) — help that responds to user intent rather than interrupting it. Push revelations (uninvited modals) get dismissed; pull revelations get clicked. NN/g's [onboarding tutorial research](https://www.nngroup.com/articles/onboarding-tutorials/) finds that tutorial walls and modal takeovers get skipped by most users, while help anchored to specific UI elements earns higher engagement and retention. ## Capabilities | Capability | Detail | | --- | --- | | Five indicator styles | Question mark, info, dot, pulse, or NEW badge — match visual weight to the moment. | | CTA actions on click | The popover carries a single action: link to a doc or external URL, start one of your product tours, or fire a custom event your app handles. | | Targeting and frequency capping | Show by plan, role, URL, or any custom attribute passed via the embed. Cap to once per visitor. Same rules engine as tours. | | No-code visual editor | Point-and-click anchoring with live preview. Publish to selected domains. | | Theme overrides per tooltip | Brand colors, popover styling, indicator sizing from 8 to 96 pixels. Inherits project theme defaults; overridable per tooltip. | | Per-tooltip analytics | Viewed, opened, dismissed, and CTA-clicked events per tooltip. | ## How it works 1. **Add a tooltip in the dashboard.** Give it a name and a URL pattern (or a wildcard for everywhere). 2. **Anchor it to an element.** Use 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.** One of five indicator styles, plus an optional popover CTA: link to a URL, start a tour, or dispatch a custom event. 4. **Publish to your domain.** Tooltips appear for users matching your targeting rules, with no app deploy. ## Choosing between surfaces | Surface | Sequential? | Anchored? | Use when | | --- | --- | --- | --- | | [Tours](/product-tours.md) | Yes | Per-step | Walking a user through a workflow in order | | [Announcements](/solutions/feature-adoption.md) | No | Banner / modal | Broadcasting a launch to every user at once | | Tooltips | No | Per-element | Persistent contextual help that waits for a click | Pick **tours** when there's a workflow to learn — a multi-step [onboarding flow](/solutions/user-onboarding.md), a feature with a sequence of actions, a setup wizard. Pick **announcements** when a launch affects everyone and you need attention now; they interrupt, so use them sparingly. Pick **tooltips** when users should find help in context — next to the field they're filling, beside the menu item they keep missing. ## Use cases - **Announce a feature without a modal.** Pulse a NEW badge on the sidebar item you just shipped; the popover explains it and links to the launch post. - **Explain a confusing field.** A `?` icon next to a form field support keeps explaining, answering inline. - **Surface a feature users miss.** A pulsing dot on an unclicked menu item, with a popover that starts a tour walking through it. ## FAQ **How is a StepsKit tooltip different from a browser-native tooltip?** StepsKit tooltips are persistent, targetable indicators you can theme, frequency-cap, and measure. Browser-native tooltips are unstyled hover effects with no targeting and no analytics. Tooltip libraries fix styling but not targeting or measurement. **Can a tooltip trigger one of my product tours?** Yes. The `start_tour` CTA action turns the popover button into a tour launcher; the popover closes first so the tour overlay takes over cleanly. A `link` CTA handles external URLs, and a `custom` CTA fires a window event your app handles. **Do tooltips work for anonymous visitors?** Yes. Without a user ID, frequency capping falls back to `sessionStorage`. Identified visitors get cross-session capping via the analytics backend. **Can I target tooltips to specific users?** Yes — the same audience rules as tours: plan, role, URL pattern, or any custom attribute passed via the embed, combined with AND/OR. Anonymous visitors can be included or excluded independently. **How much can I customize the look?** Five indicator styles, per-tooltip colors, sizing from 8 to 96 pixels, plus full theme overrides for the popover (background, text, button colors, border radius). No CSS required, but the embed exposes class names for stylesheet-level overrides. **Do tooltips work in single-page apps?** Yes. A `MutationObserver` re-resolves the anchor when your SPA swaps the DOM, so the indicator keeps tracking the right element across route changes. No re-initialization needed. **How do I install tooltips?** The same StepsKit embed used for tours — an npm package or one async `