Tooltips
A tooltip is a short note pinned to one element on your page: a form field people get wrong, a plan name, a new button, an icon nobody understands. You create it from the dashboard and it appears on your live site in about 30 seconds. No code or deploy.
Create a tooltip
- Go to Fix → Tooltips and click Pick element.
- Open the link on your site and click the element the tooltip belongs to.
- Write a title and/or text, and optionally a link (a page on your site or an
https://address). - Choose when it shows (below), the position, and the pages it should appear on.
- Click Save tooltip. It goes live on the next page load.
You can also type a CSS selector instead of picking (Add manually).
When it shows
| Option | Behaviour | Good for |
|---|---|---|
| On hover | Opens while the visitor points at the element or tabs to it with the keyboard | Explaining a field or label |
| On click | Opens when the visitor clicks the dot or the element | Optional detail, such as what's in a plan |
| Show right away | Opens on its own until the visitor clicks Got it (then never again for them) | Pointing out something new |
| Only when a workflow opens it | Never shows on its own | Help at the right moment, such as after a visitor hesitates |
Pulsing dot: a small dot on the element that draws the eye until the visitor opens the tooltip once.
Position: Best fit places it below the element and moves it above, right or left when there isn't room. It stays inside the screen and follows the element as the page scrolls.
Open a tooltip from a workflow
The most useful tooltips show up only when someone needs them:
- Create the tooltip and set it to Only when a workflow opens it.
- In Workflows, use the Explain when someone hesitates template, or add a Show Tooltip action to any workflow and choose your tooltip.
For example: Idle for 30 seconds → Page is /checkout* → Show Tooltip "Card number: just the 16 digits". Add a goal and hold back under Measure to see whether it helps. See Workflows.
How it looks and behaves
- It takes your site's colors, font and corner style automatically, and sits in an isolated layer, so your site's CSS can't break it and it can't affect your page.
- Text is shown exactly as written; HTML is not interpreted.
- Visitors can close it with Esc. Hover tooltips also open from keyboard focus.
- On single-page apps (React, Next.js, Vue) it reattaches when the element re-renders or the route changes.
- Visitors who prefer reduced motion don't see the pulsing animation.
- If the element isn't on the page, nothing is shown.
Limits
| Title | 80 characters |
| Text | 400 characters |
| Link label | 40 characters |
| Tooltips per site | 100 |
Turn a tooltip off with its switch to remove it from your site; turn it on to bring it back.