MentorJS

JavaScript user guiding and tutorial library

Demo

https://ndnci.github.io/mentorjs/

Dependencies

No dependencies

Installation

Download from

Extract js and css

...
	<link rel="stylesheet" href="build/index.css">
</head>
...
	<script src="build/index.js"></script>
</body>

Usage

Basic

<script>
// don't forget to load MentorJS after all loaded contents
window.addEventListener('load', function () {

new MentorJS().steps([
                {
                    title: "Hello World !",
                    message: "Your message",
                }]);
});
</script>

With target

<div id="test">Your Text</div>

new MentorJS().steps([
                {
		target: "#test",
		title: "Hello World !",
		message: "Your message",
                }]);

With multiple steps

new MentorJS().steps([
                {
		title: "Hello World !",
		message: "Your message",
                },
		{	
		title: "Second test !",
		message: "Second message",
                }]);

With specific parameters for each step

new MentorJS().steps([
                {
		theme: "dark",
		closeButton: "true",
		title: "Hello World !",
	    	message: "Your message",
                },
		{
		theme: "light",
	   	message: "Without title !",
                }]);

With general parameters

new MentorJS({
		theme: "dark",
		})
		.steps([
                {
		title: "Hello World !",
	    	message: "Your message",
                },
		{
		/* it will overwrite constructor value for this step */
		theme: "light",
		message: "Without title !",
                }]);

Settings

| Name | Parameters | Default | Description | ------------- | --------------- | ------------- | ------------- | | autoRun | true, false | true | By default script run automatically | stepFrom | step index | 0 | Any existing step

Options

| Name | Parameters | Default | Description | ------------- | ------------ | ------------- | ------------- | | theme | dark, light | light | animation | zoom, pulse, bounce, toLeft, toRight, toTop, toBottom | null | backgroundArea | any selector | document.querySelector("body") | backgroundEffectClass | any classname | mentor-blur | targetNoEffectClass | any classname | mentor-noblur | targetToggleClass | any classname | mentor-toggle | modalDivClass | any classname | mentor-modal | modalDivHeaderClass | any classname | mentor-modal-header | modalDivHeaderCloseClass | any classname | close | modalDivBodyClass | any classname | mentor-modal-body | modalDivFooterClass | any classname | mentor-modal-footer | previousButtonClass | any classname | mentor-btn mentor-modal-previous | nextButtonClass | any classname | mentor-btn mentor-modal-next | endButtonClass | any classname | mentor-btn mentor-modal-end | autoScroll | true, false | true | scrollMethod | scrollIntoView, scrollTo | scrollTo | scrollOn | target, modal | modal | scrollBehavior | auto, smooth | smooth | scrollBlock | start, center, end, nearest | center | scrollInline | start, center, end, nearest | center | openButtonId | any unique id | null | Must be unique for each step | closeButtonId | any id | modalClose | Close current step | previousButtonText | text | « Back | Allow HTML | nextButtonText | text | Next » | Allow HTML | endButtonText | text | Thanks | order | number | null | Order of step | title | text | null | Allow HTML | message | text | null | Allow HTML | target | any selector | null | Example "#test", or ".test" | closeButton | true, false | false | Close button on header | showHeader | true, false | true | showFooter | true, false | true | showArrow | true, false | true | outsideClick | true, false | false | Detect outside click for close modal | targetAutoShow | true, false | false | If target is hidden by default, you can set it to true | margin | number | 10 | Space between modal and target, only number, max 10 recommended | horizontal | left, center, right, auto | auto | vertical | top, center, bottom, auto | auto | responsive | true, false | true | wait | time ( ms ) | 0 | Wait time ( for actual modal ) when user click to next or previous button default is 0 for modal speed | events | javascript events | click | You can define events with space " " for listener function, for example : "click touchstart" | mobileSupport | true, false | true

Functions

| Name | Description | ------------- | ------------------------------ | | run() | Run script if autoRun is disabled | goToStep($index) | Go to ($index) specific step | backStep() | Go to previous step | nextStep() | Go to next step

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT