[SOLVED] Custom HTML elements in intro.js

Custom HTML elements in intro.js

Can I add checkboxes or custom HTML elements directly within the intro messages?

There are no any features in the documentation about adding custom HTML elements in intro messages.

const handleIntroMessage = () => {
  console.log("!")
  intro.setOptions({
    steps: [
      {
        element: '#lastname',
        intro: 'Last Name of the defendant here.',
        title: 'Last Name'
      },
      {
        element: '#firstname',
        intro: 'First Name of the defendant here.',
        title: 'First Name'
      }
    ]
  });
  intro.setOption("dontShowAgain", true);
  intro.start();
}

Solution

Example

How to insert HTML code to toolip - Intro.js Docs

// Import the React and ReactDOM modules
const { useState, useEffect } = React;

// App component
function App() {
  useEffect(() => {
    // Create Intro.js on component load
    const intro = introJs();
    
    // Define the steps of the introduction
    intro.setOptions({
      steps: [
        {
          intro: "<h2 style='color: red;'>Welcome to the demo application!</h2>",
        },
        {
          element: "#step1",
          intro: "<p style='font-size: 20px;'>This step is an example of an HTML element</p>",
        },
        {
          element: "#step2",
          intro: "<p style='background-color: yellow;'>And this is another HTML element</p>",
        },
      ],
    });
    
    // Start the introduction
    intro.start();
  }, []);

  return (
    <div>
      <h1>React Intro.js Demo</h1>
      <p id="step1">This is an example HTML element.</p>
      <p id="step2">And this is another example HTML element.</p>
    </div>
  );
}

// Render the application to the DOM
ReactDOM.render(<App />, document.getElementById("root"));

<link
  href="https://cdn.jsdelivr.net/npm/intro.js/introjs.min.css"
  rel="stylesheet"
/>

<div id="root"></div>

<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intro.js/intro.min.js"></script>