How to Create & Edit Tooltips
This doc reviews the basic steps of building a tooltip flow. For more advanced use:
- Learn how to place tooltips on dynamic elements (dropdown menus, popouts, etc) here
- View and copy CSS sheets to style your tooltips
- Troubleshoot tooltips that won't display
- Open the Appcues editor; click Create and select Tooltips
- Your cursor is now in editing state to place your first tooltipt: as you move your cursor around the page, you'll notice it highlights elements you hover over with a blue outline
- Place your first tooltips on the element you're pointing to: get as specific as you can, though you can always re-position this later
- To add another tooltips, click Add > Tooltip in the bottom of your editor bar
- Continue adding tooltips until your flow is complete: once it looks good, click Target & Publish to edit your targeting rules before publishing your flow
You can edit tooltips per-step, or make adjustments that affect your entire tooltip flow.
To access your individual tooltip settings, click the cog icon next to the number of the step you'd like to work on.
To reposition tooltips, select Reposition at the top right corner of the step settings. Your cursor will again start outlining the elements you can place your tooltip on.
If you notice the selector in your step settings is too general (or your tooltip throws an error/does not show up when published), you can enter more specific selector in the Selector field. Adjust where you'd like the beacon to appear accordingly by changing the numbers under Distance from left/top edge.
Tooltip arrow position
This controls where your text box will appear from in relation to the tooltip element. By default your arrow is set for the optimal position (based on the browser size and where the element sits on the page), but you can select for your text to appear from other corners, the top, or the bottom of your chosen element.
Advance this tooltip when...
Tooltips by default include a Next or Close button to guide users all the way through your entire tooltip flow. There may be cases where you'd like your tour to continue or end as your user clicks an element on your page instead. To remove the Next or Close button for an individual tooltip, opt to "Advance this tooltip when..." "The element it's pointing to is clicked (hides the Next button)"
Learn more about these action-driven tooltips here.
To delete a tooltip, click on the trash icon in the top of the step settings.
To access settings that will change a group of tooltips, click on the paintbrush icon to the left of your tooltip group.
Tooltips by default have no beacons, but if you'd like to direct even more attention to the elements you're describing you have two beacon styles to choose from: question-mark icons or circles.
Tip: You can create a theme with a pulsing beacon under your Styles page
If you'd like to draw even more attention and focus on the elements your tooltips are built on, choose one of the Backdrop options.
Focus will place a radial focus on your element but allow your users to still click through on other elements on the page.
Highlight clearly outlines the element your tooltip is attached to and requires your user to continue or complete the tooltips before interacting with your page.
Flows can be skippable or required for you end users.
Skippable tooltips include an option for users to Hide these tips. If you uncheck the Skippable box, the Hide these tips option will be removed and users will have to click through your entire flow to complete it.
You can apply any of the themes you create at your Styles page to your flow. Select a theme from the Theme dropdown and it will automatically apply its styling to every step in your flow.
Learn more about creating themes here.
Switch Preview Page
You can change the page you build or view your flow on by clicking the Switch Preview Page button. Once this button is clicked, you'll be able to navigate through your app normally. You can also use this button to open non-Appcues pop-ups or windows that you'd like to place tooltips on.
When you've found the page or elements you'd like to work on, select Display flow on this page from the bottom bar on your screen.