Feature✨: hints

[no-1ne]

highlights all steps at once instead of one by one if hints enabled

https://introjs.com/docs/examples/basic/hints

[Josias]

Interesting! I think you could already quite easily setup something like that using the existing boarding.js API.

const boarding = new Boarding();

const hints = [
  {
    element: ".element-selector",
    popover: {
      title: "Title",
      description: "Description",
    },
  },
  {
    element: ".second-element-selector",
    popover: {
      title: "Title",
      description: "Description",
    },
  },
];

let cleanHintEventListeners = [];

function showHints() {
  hints.forEach((hint) => {
    const element = document.querySelector(hint.element);

    // add hint class to style the element. could also add a DOM element alternatively
    element.classList.add("hint-active");

    function handler() {
      boarding.highlight(hint);
    }
    // add click event listener to highlight the element
    element.addEventListener("click", handler);

    // add an "unsubscribe" function to remove the event listener again and remove the hint class once hints should be hidden again
    cleanHintEventListeners.push(() => {
      element.removeEventListener("click", handler);
      element.classList.remove("hint-active");
    });
  });
}

function hideHints() {
  cleanHintEventListeners.forEach((clean) => clean());
}

(note I didn't test the code, it might have bugs. also there are many other possible ways of writing this :)) @no-1ne

[no-1ne]

That should work. Thank you :)

[Josias]

Great! Ill close this for now, as I want to keep the library as lean as possible. In case similar requests follow in the future, I might consider adding it to an official API, but for now a custom solution seems to be the way to go 👍🏻