Create a tooltip
Updated October 6, 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. With the Dot indicator, a tooltip works as a hotspot: a pulsing dot that draws attention to a feature. Common use cases:
- Explain what specific buttons or settings do
- Draw attention to newly launched features
- Answer common questions right where they come up
Start a new tooltip
In your dashboard, click Flow Editor. Go to the page with the element you want to explain, then click Start from scratch in the editor panel and choose Tooltip.
Click the element the tooltip belongs to to anchor it.
Write the message
Click into the tooltip on the page and type the message you want users to read. The preview is live: changes show as you type and save automatically.
Choose how it looks and opens
Under Appearance:
- Indicator style: Dot pulses to draw attention, which suits something new. ? and i are quieter and suit help that’s always there.
- Open trigger: with Click, the message opens when users click the indicator and stays open until they click somewhere else. With Hover, it opens when they move the pointer over the indicator and closes when the pointer leaves.
URL targeting
The tooltip appears only on the page set under Show on URL in the Target section. A new tooltip is set to the page you created it on. 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.
Use Pattern when the same element appears on many pages, like a button on every project page.
Choose who sees it and how often
Click On page load under Flow settings at the top of the editor panel. To see how a flow, its guides, and their settings fit together, read How flows work.
Segmentation (audience)
By default, the tooltip appears for every user who opens the page. Add rules under Segmentation to limit it to specific groups: first-week signups, users on a particular plan, users in a particular role.
Each rule compares a property your app sends to FlowNavi (role, plan, signup date, etc.) with a value:
| Condition | Example |
|---|---|
| = / != | plan = "pro" |
| > / < | seatCount > 10 |
| contains | signupSource contains "google" |
| before / after | signedUpAt after "2026-01-01" |
| within last N days | signedUpAt within last 7 days |
If you add several rules, a user must match all of them.
Frequency
Users dismiss a tooltip by clicking the × in its message. Clicking somewhere else only closes the message, and the indicator stays.
Under Display Rules, decide what happens after a user clicks the ×:
- Show Every visit: the indicator is hidden for the rest of that visit and is back on the next one. Choose this for help that should always be available.
- Show N times: each click on the × counts toward N. After N, the tooltip stops appearing for that user. Choose this for one-time announcements that should fade once the user has seen them.
A new tooltip is set to show 1 time, so it disappears for a user the first time they click the ×. If it explains a button or a setting, switch it to Show Every visit.
Preview
Click Preview in the footer to test the tooltip before publishing. You’ll see a panel where you can set fake user and company 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 properties. Use the back arrow to exit preview entirely.
Publish
Click Publish to make the tooltip available to your users. When you edit the tooltip later, your users keep seeing the published version until you click Publish again.
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
Published tooltips are paused in your browser while the editor is open. Click ⋮ at the top of the editor panel and choose Log out of editor, then open your app at the tooltip’s URL, signed in as a user the tooltip appears for. The indicator should appear on the element, and clicking or hovering it should open your message.
If your tooltip isn’t showing
If your tooltip doesn’t appear, check:
- The editor is open: published tooltips are paused in your browser while the editor is open. Log out of the editor first.
- Not published: your users only see the published version. Edits made after publishing don’t reach them until you click Publish again.
- FlowNavi isn’t installed: the tooltip can only appear in your app once the SDK is installed.
- Built on the demo app: a tooltip you built on the demo app still points at the demo app’s page and element. Open it in the editor on your own app, click Retarget in the Target section to pick an element in your app, and update Show on URL.
- URL doesn’t match: verify the page URL matches Show on URL. If using Pattern match, double-check the wildcards.
- The element isn’t on the page: the tooltip needs its element. It won’t appear on a page that matches the URL but doesn’t contain that element.
- User is outside the segment: confirm the user matches all segmentation rules set on On page load.
- Already dismissed: a tooltip closed with the × doesn’t come back during the same visit. With Show N times, it stops for good after N. A new tooltip is set to 1, so clicking the × once while testing is enough to hide it. Use Preview to test without using up a view.