search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.69k stars 2.59k forks source link

Show hints based on step #1969

Open SebastianStehle opened 12 months ago

SebastianStehle commented 12 months ago

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 commented 12 months ago

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);
binrysearch commented 11 months ago

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