onbeforechange() is called before the tooltip is displayed

[DamienCassou]

Description

In #1377 (comment), it was suggested to use onbeforechange() to change the style of individual steps. So I'm trying something like this:

intro.onbeforechange(function () {
  console.log("tooltip", document.querySelector(".introjs-tooltip"));
});

The problem is that onbeforechange() is called before the tooltip is displayed so document.querySelector() returns null for the first step:

As you can see, when onbeforechange() is first called, I get null. It is only after I clicked "Next" that I got the tooltip.

Expected Behavior

I would like a way to customize the style of the first step in the wizard to make it larger.

Actual Behavior

The first step can't be customized because onbeforechange() is called before any tooltip is rendered.

Errors and Screenshots (optional)

This can be reproduced with the example/callbacks/onbeforechange.html example:

diff --git a/example/callbacks/onbeforechange.html b/example/callbacks/onbeforechange.html
index d510ac1..0789a50 100644
--- a/example/callbacks/onbeforechange.html
+++ b/example/callbacks/onbeforechange.html
@@ -72,10 +72,7 @@
       function startIntro(){
         var intro = introJs();
         intro.onbeforechange(function () {
-          if (this.currentStep() === 2) {
-            alert('You cannot continue! :P')
-            return false;
-          }
+            console.log("tooltip", document.querySelector(".introjs-tooltip"));
         });
         intro.start();
       }
-- 
2.41.0

Workaround

I guess something like #1266 could solve my issue. I don't know any other workaround.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DamienCassou]

This is still a problem for us.