xpln.js stands for explain and is a simple introduction/tutorial library for your page. It uses popper.js, so if you already use it, don't add it again.
Add this <link rel="stylesheet" href="src/xpln.css"> into your <head>.
Import xpln.js in your script file like
import xpln from './src/xpln.min.js';In your HTML:
- add attribute and text
data-xpln="This is your explanation text." - optional: add step attribute to each element
data-xpln-step="0"
In your script:
- Use options or not.
- Call init
- Call show
const options = { delay: 200, disableActiveElem: false };
xpln.init(options);
xpln.show();
document.querySelector('.show-help').addEventListener('click', () => {
xpln.show();
});See index.html for a "complete" example.