intro.js icon indicating copy to clipboard operation
intro.js copied to clipboard

Show hints based on step

Open SebastianStehle opened this issue 1 year ago • 2 comments

Description

I have a custom step definition with multiple hints per step. I would like to show the hints per step and use callbacks to control the behavior. I tried addHints or showHints, but it does not work. The full flow gets destroyed.

Expected Behavior

Just show the hints

Actual Behavior

No error, but the tour stops.

Example (recommended)

https://jsfiddle.net/uw03tgzL/

SebastianStehle avatar Jul 26 '23 12:07 SebastianStehle

I got it working somehow.

When you delay the hints, it seems to work, see: https://jsfiddle.net/2b6mej1k/3/

The other problem is that the hints do not have a proper z-index. I am sure it makes sense somehow, but perhaps there should be an API for that.

I have tested several delays and even 2 seconds was sometimes not enough.

setTimeout(() => {
                intro.removeHints();
                intro.setOption('hints', step.hints);
                intro.showHints();
                
                document.querySelectorAll('.introjs-hint').forEach(hint => {
                    hint.style.zIndex = '10000000';
                })
            }, 5000);

SebastianStehle avatar Jul 28 '23 08:07 SebastianStehle

This is great! We released a new version today which drastically improves the TypeScript types. Could you please rebase?

binrysearch avatar Aug 14 '23 19:08 binrysearch