Add ability to minimize tooltip in the handler callback

[davidjconnolly]

Great library, thanks for building and maintaining!

I ran into a use case that I'm not sure how to handle. I went through the controlled demo code in detail and still wasn't able to figure out a way to do this. I have a button that I want the user to click before advancing the tour. I use disableBeacon: true in order to show the tooltip when the page loads and I manually handle stepIndex when the user closes the tooltip so I can setIndex = index to prevent the tour from advancing until the user actually does the thing I want them to do.

The issue is, because of disableBeacon: true whenever I set the index to that step, it automatically re-opens the tooltip. This means there is no way to "minimize" that tooltip (i.e. show the beacon instead of the tooltip) so in my case when the user clicks close nothing happens since they're stuck in a loop.

Here's the code snippet and the functionality I'm looking for:

_handleJoyrideCallback = data => {
        const { action, index, size, type, step } = data;

        if (type == EVENTS.STEP_AFTER && action == ACTIONS.CLOSE) {
            this.setState(
                {
                  stepIndex: index,
                  // minimizeTooltip: true <-- Something like this is what I'd like, I tried disableBeacon: false here and it doesn't work
                },
              );
        } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
            // Update state to advance the tour
            this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
        }
    };

Can anybody think of a way to do this? Thanks!

[gilbarbara]

hey @davidjconnolly

Something like this?

You can't change the step within the callback...
You need to update the step itself, single source of truth.

[davidjconnolly]

Thanks for the quick reply and the suggestion! This is definitely helpful, however I'm trying to get the beacon to show then the tooltip is hidden. For example here, is there a way to show the beacon when we hide the tooltip? Use case is, user reads the tooltip, closes it then it anchors them via the beacon to the ui element they need to interact with.

[gilbarbara]

I'm not sure I understand, but maybe you don't need a tour.

You can check react-floater which is responsible for the tooltips in Joyride, maybe it will be more appropriate for what you want.