Create a tooltip
Updated June 4, 2026
On this page
A tooltip attaches a small indicator to a UI element. Users click or hover the indicator to open a popover with your message. Common use cases:
- Explain what specific buttons or settings do
- Draw attention to newly launched features
- Answer common questions right where they come up
Before you start
You’ll need:
- The FlowNavi editor installed in your browser. See Set up the FlowNavi editor.
- The FlowNavi SDK installed in your app. See Install the FlowNavi SDK.
Open the tooltip builder
Click the FlowNavi extension icon in your browser toolbar. In the popup, click Open Editor. A new tab opens at your app and starts the editor.
In the Create section of the editor panel, click Tooltip. This activates the element picker.
Click the element you want the tooltip attached to: the button you’re explaining, the setting you’re clarifying, the feature you’re announcing.
Add tooltip content
After you click an element, a popover appears attached to it. Add your tooltip content (the message you want to show users) directly in the popover. The preview is live: changes show as you type.
While you’re here, the header field at the top of the editor panel is for the tooltip’s name. Name it something you’ll recognize later in your guide list.
Tooltip settings
These settings control how the tooltip looks and where it shows.
Target element
To swap which element the tooltip points at, click Retarget in the Target section and pick a different one.
Appearance
A tooltip shows a small indicator on the target element. Three settings control how it looks and opens:
- Indicator style: choose Dot (a pulsing dot), ? (a question mark), or i (an info icon).
- Open trigger: Click opens the popover when users click the indicator. Hover opens it when users hover.
- Placement: where the indicator sits relative to the target. Edge options (Top, Right, Bottom, Left) place it beside the target. Overlap options place it on top of the target.
URL targeting
The tooltip only appears on pages matching its URL targeting. Two match types:
- Exact: for fixed URLs like
/settings. - Pattern:
*is a wildcard for variable parts. Each*wildcard matches one dynamic segment./projects/*matches/projects/1and/projects/2, but not/projects/1/details.
Segmentation (audience)
Show the tooltip only to the users it’s meant for. By default, tooltips show to all users. Add rules to target specific groups: first-week signups, users on a particular plan, users who haven’t completed a specific action.
There are two kinds of rules:
Property rules match users by properties your app sends to FlowNavi (role, plan, signup date, etc.).
| Operator | Example |
|---|---|
| equals / does not equal | plan equals "pro" |
| greater than / less than | seatCount greater than 10 |
| contains | signupSource contains "google" |
| before / after | signedUpAt after "2026-01-01" |
| within last N days | signedUpAt within last 7 days |
Behavior rules match users by whether they’ve completed other FlowNavi guides. Useful for sequencing: show your “Dark mode launch” tooltip only to users who completed the “Getting started checklist”.
- completed: user finished the named guide.
- not completed: user hasn’t finished it yet.
Frequency
Decide how often a user should see the tooltip:
- Show every visit: for evergreen help that should always be available.
- Show N times: for one-time announcements that should fade once the user has seen them. Each time the user dismisses the tooltip (clicks the × to close it) counts toward N. After N dismisses, the tooltip stops showing.
Preview
Click Preview in the footer to test the tooltip before publishing. You’ll see a config panel where you can set fake user properties to test segmentation rules. For example, set plan: "pro" to verify a “Pro users only” rule matches.
Click Start Preview to run the tooltip. URL targeting, segmentation, frequency, and the open trigger all behave the same as a published tooltip. Dismissing the tooltip in preview doesn’t affect anything outside of preview mode (it’s a sandbox).
Use Stop to halt and tweak the property config. Use the back arrow to exit preview entirely.
Publish
Click Publish to make the tooltip available to your users.
For the tooltip to actually appear, the FlowNavi SDK needs to be installed in your app. See Install the FlowNavi SDK if you haven’t already.
Confirm it’s working
Open your app at the tooltip’s targeted URL, signed in as a user inside the segment. The indicator should appear on the target element, and clicking or hovering it should open the popover.
If your tooltip isn’t showing
If your tooltip doesn’t appear, check:
- URL doesn’t match: verify the page URL matches the tooltip’s URL targeting. If using Pattern match, double-check the wildcards.
- User is outside the segment: confirm the user matches all segmentation rules on the tooltip.
- Already dismissed: if you set Show N times, the tooltip stops after the user has dismissed it N times.