[introjs] add hints interface to options (#14078)

intro.js/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for intro.js 2.0
+// Type definitions for intro.js 2.4
 // Project: https://github.com/usablica/intro.js
 // Definitions by: Maxime Fabre <https://github.com/anahkiasen/>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -10,6 +10,12 @@ declare namespace IntroJs {
         position?: string;
     }
 
+    interface Hint {
+        hint: string;
+        element?: string|HTMLElement|Element;
+        hintPosition?: string;
+    }
+
     interface Options {
         nextLabel?: string;
         prevLabel?: string;
@@ -32,6 +38,7 @@ declare namespace IntroJs {
         hintPosition?: string;
         hintButtonLabel?: string;
         steps?: Step[];
+        hints?: Hint[];
     }
 
     interface IntroJs {
@@ -56,6 +63,11 @@ declare namespace IntroJs {
 
         addHints(): IntroJs;
 
+        showHint(stepId: number): IntroJs;
+        showHints(): IntroJs;
+        hideHint(stepId: number): IntroJs;
+        hideHints(): IntroJs;
+
         onhintsadded(callback: Function): IntroJs;
         onhintclick(callback: (hintElement: HTMLElement, item: Step, stepId: number) => any): IntroJs;
         onhintclose(callback: (stepId: number) => any): IntroJs;

intro.js/intro.js-tests.ts

@@ -35,6 +35,18 @@ intro.setOptions({
             element: '#step5',
             intro  : 'Get it, use it.'
         }
+    ],
+    hints: [
+        {
+            element: '#step1',
+            hint: 'This is a hint',
+            hintPosition: 'middle-right'
+        },
+        {
+            element: document.querySelectorAll('#step2')[0] as HTMLElement,
+            hint: 'This is another hint',
+            hintPosition: 'top-left'
+        }
     ]
 });
 
@@ -69,6 +81,10 @@ intro.start()
         alert('Hint close for Step ID ' + stepId);
     })
     .addHints()
+    .showHint(1)
+    .showHints()
+    .hideHint(1)
+    .hideHints()
     .clone();
 
 introWithElement.start()