Closed no-1ne closed 1 year ago
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
That should work. Thank you :)
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 👍🏻
highlights all steps at once instead of one by one if hints enabled
https://introjs.com/docs/examples/basic/hints