Guide: Product Tours and Hints

An example of a <FrigadeTour/> tooltip

​

Adding a tooltip tour to your application

<FrigadeTour
  flowId='flow_Bkh43aEjXcrna2lO'
  tooltipPosition='auto'
/>

<span id="my-element">
  <MyComponent />
</span>

data:
  - 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 adding debug: true to the <FrigadeProvider /> component. This will log if a selector is not found on the current page.

<FrigadeProvider config={{ debug: true }}>
  <FrigadeTour
    flowId='flow_Bkh43aEjXcrna2lO'
    tooltipPosition='auto'
  />
</FrigadeProvider>

​

Controlling the z-index of tooltips

By default, tooltips are rendered with a z-index of 90. To change this, you can use the appearance prop:

<FrigadeTour
  flowId='flow_Bkh43aEjXcrna2lO'
  appearance={{
    styleOverrides: {
    // This controls the z-index of the highlight/ping
    tourHighlightContainer: {
      zIndex: '200 !important',
    },
    // This controls the z-index of the tooltip itself
    tooltipContainerWrapper: {
      zIndex: '201 !important',
    },
  }}}
/>

Alternatively, you can override the z-index for a specific tooltip directly in config.yml using the props property:

data:
- id: frigade-profile-tooltip
  title: My title
  subtitle: My subtitle
  primaryButtonTitle: 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 props.tooltipPosition property in config.yml to override the default positioning. Note that the only available options are left and right as vertical placement is automatically determined by the position of the element on the page.

data:
- id: frigade-profile-tooltip
  title: My title
  subtitle: This tooltip will always show up on the left side of the selector
  primaryButtonTitle: Got it
  selector: ".frigade-tooltip"
  props:
    tooltipPosition: left

​

Absolute vs fixed positioned tooltips

By default, tooltips are rendered with position: absolute at the root of your application. If you want to position the tooltip relative to the viewport (for instance, in a fixed nav bar), you can use the props property in config.yml to override the default positioning:

data:
- id: frigade-profile-tooltip
  title: My title
  subtitle: My subtitle
  primaryButtonTitle: Got it
  selector: ".frigade-tooltip"
  props:
    position: fixed

​

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 offset property. Alternatively, you can override the offset for a specific tooltip directly in config.yml using the props property:

data:
- id: frigade-profile-tooltip
  title: My title
  subtitle: My subtitle
  primaryButtonTitle: Got it
  selector: ".frigade-tooltip"
  props:
    offset:
      x: 10
      y: -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 primaryButtonTitle property in config.yml:

data:
- id: my-tooltip
  title: My title
  subtitle: My subtitle
  # Omitting primaryButtonTitle will hide the CTA button
  # primaryButtonTitle: 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), you can do so in a couple ways.

First, you can use the completionCriteria property on a step to automatically mark the step as completed when a user meets the criteria. See Targeting for more information.

data:
- id: example-step
  ...
  completionCriteria: user.properties.connectedBank == true

Alternatively, you can use markStepCompleted from useFlows hook.

const { markStepCompleted } = useFlows();

markStepCompleted('my-flow-id', 'my-tooltip');