Guide: Product Tours and Hints
An example of a <Frigade.Tour/> tooltip
Adding a tooltip tour to your application
To add tours and hints to your product, add the <Frigade.Tour />
component to your application with your corresponding Flow ID. See the Tour component for reference.
<Frigade.Tour
flowId='flow_Bkh43aEjXcrna2lO'
tooltipPosition='auto'
/>
Tooltips work on class and id selectors. To highlight an element, we recommend wrapping it in a div with a unique id to avoid selector errors due to css class changes.
<span id="my-element">
<MyComponent />
</span>
Then, in the Frigade Dashboard, you can use the selector
property to highlight the element:
steps:
- title: "Welcome to Frigade!"
description: "This is a tour of the Frigade platform."
selector: "#my-element"
Seamless navigation between pages
One of the benefits of Frigade is that it can tap into your existing router to navigate users across pages without janky page refreshes. Check out our guide on Navigation for setup.
Debugging tooltips
If a tooltip is not appearing when you expect it to, you can enable debugging by enabling Verbose logging in your browser. To enable this in Chrome Devtools, simply click the three dot menu in the console as shown below:
Enabling verbose logging in Chrome Devtools
This will log if a selector is not found on the current page.
Controlling the z-index of tooltips
By default, tooltips are rendered with a z-index of 9999. To change this, you can use the zIndex
prop:
<Frigade.Tour flowId="my-flow-id" zIndex={100} />
Alternatively, you can override the z-index for a specific tooltip directly in the YAML config using the zIndex
property:
steps:
- id: frigade-profile-tooltip
title: My title
subtitle: My subtitle
primaryButton:
title: Got it
selector: ".frigade-tooltip"
props:
zIndex: 106
Overriding tooltip position for a specific tooltip
If you want to force a specific tooltip to show up on the left or right side of the targeted element, you can use the align
property in Config YAML to override the default positioning.
It follows the same syntax as the align property in the Tour
component.
steps:
- id: frigade-profile-tooltip
title: My title
subtitle: This tooltip will always show up on the left side of the selector
primaryButton:
title: Got it
selector: ".frigade-tooltip"
props:
align: after
Offset x and y positioning
You can add a custom offset to the x and y positioning of all tooltips in a tour using the sideOffset
and alignOffset
properties (see Tour component documentation).
Alternatively, you can override the offset for a specific tooltip directly in the YAML config by leveraging the props
field:
steps:
- id: frigade-profile-tooltip
title: My title
subtitle: My subtitle
primaryButton:
title: Got it
selector: ".frigade-tooltip"
props:
sideOffset: 10
alignOffset: -10
Hiding CTA buttons on tooltips
Sometimes you may want to hide the CTA button on a single tooltip for a user to take an action in your application rather than simply continuing the tour on every button click. To do this, simply omit the primaryButton.title
property in the YAML config:
steps:
- id: my-tooltip
title: My title
subtitle: My subtitle
# Omitting primaryButton.title will hide the CTA button
# primaryButton:
# title: Got it
selector: ".frigade-tooltip"
Programmatically completing a step
If you want too programmatically complete the step (e.g. an action in your app advances the Flow), see the documentation for automatically advancing a Flow.