Steps
- Download the following files from GitHub - xbsoftware/enjoyhint
- enjoyhint.css
- enjoyhint.min.js
- Upload both of the files into your app at Properties & Export > Add Resource
- Add the following code into CustomHTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script> <link href="#appResource.enjoyhint.css#" rel="stylesheet"> <script src="#appResource.enjoyhint.min.js#"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script> <script type="text/javascript"> //initialize instance var enjoyhint_instance = new EnjoyHint({}); //simple config. //Only one step - highlighting(with description) "New" button //hide EnjoyHint after a click on the button. var enjoyhint_script_steps = [ { selector: "input[id='name']", event_type: "next", description: "This is a hardcoded hint, see CustomHTML", showSkip: false }, { selector: "#section1 > div.form-column > div:nth-child(2)", event_type: "next", description: "Click here to fill up the date!", showSkip: false }, { selector: "#submit", event_type: "next", description: "Click the save button once you're done!", shape: 'circle', radius: 50, showSkip: false } ]; //set script config enjoyhint_instance.set(enjoyhint_script_steps); //run Enjoyhint script enjoyhint_instance.run(); </script>
During runtime, once you open the form you will see the EnjoyHint hints.
Reference
Download Demo App
Download the demo app with examples of using EnjoyHint. It also includes customizable hints from a lookup table as well.