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.min.css">
</head>
...
	<script src="build/index.min.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