Image Modified

Steps

1. Download the following files from GitHub - xbsoftware/enjoyhint
   1. enjoyhint.css
   2. enjoyhint.min.js
2. Upload both of the files into your app at Properties & Export > Add Resource
3. Add the following code into CustomHTML

   
   

   Code Block
   language xml linenumbers true
   <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']", /*modify this to point to input field*/ event_type: "next", description: "This is a hardcoded hint, see CustomHTML", showSkip: false }, { selector: "#section1 > div.form-column > div:nth-child(2)", /*modify this to point to input field*/ event_type: "next", description: "Click here to fill up the date!", showSkip: false }, { selector: "#submit", /*modify this to point to input field*/ 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>

4. During runtime, once you open the form you will see the EnjoyHint hints.

Reference

GitHub - xbsoftware/enjoyhint

Download Demo App