Hints Creation with EnjoyHint

EnjoyHint: A tool for creating interactive website tips

EnjoyHint is a tool for creating interactive prompts on a website that helps users understand the functionality of web applications. It is free to use, supports highlighted areas of different shapes, allows prompt delays, and provides cross-browser support.

Core functions:

• Free and easy to use: EnjoyHint is completely free and easy to use.
• Interactive Tips: Create interactive Tips that attract users' attention to guide users to understand the functions of the website.
• Custom shape: Supports multiple highlight area shapes and flexibly adapts to different page elements.
• Delay settings: You can set the prompt delay time to optimize the user experience.
• Cross-browser compatibility: Compatible with mainstream browsers to ensure widespread applicability.
• Mobile terminal support: Supports Android, iOS and Windows touch screen devices.

How to use:

1. Installation: Install using Bower (bower install enjoyhint) or download from the GitHub repository.
2. Introduction: Introduce EnjoyHint and jQuery libraries in HTML files (version must be greater than or equal to 1.7).
3. Initialization: Create a new EnjoyHint instance: var enjoyhint_instance = new EnjoyHint({});
4. Definition tips: Create an array of prompt steps enjoyhint_script_steps, each step defines the prompt content, trigger events, styles, etc.
5. Setting configuration: Use enjoyhint_instance.set(enjoyhint_script_steps); to set the prompt configuration.
6. Run: Call enjoyhint_instance.run(); Run the prompt script.

Example of prompt definition:

A simple prompt, highlight a button and display the instructions:

var enjoyhint_script_steps = [{
    'click .btn': '点击此按钮切换搜索结果',
    'skipButton': {className: "mySkip", text: "明白了"} //自定义跳过按钮
}];

Create a prompt sequence:

By the next event, multiple prompts are displayed in sequence:

var enjoyhint_script_steps = [
    {'next .navbar-brand': '这是网站标题'},
    {'key #mySearch': '在此输入搜索关键词，按Enter键搜索', 'keyCode': 13},
    {'click .btn': '点击这里切换搜索类型'},
    {'next .about': '关于我们', 'shape': 'circle', 'radius': 70},
    {'next .contact': '欢迎反馈', 'showSkip': false} // 最后一个提示，隐藏跳过按钮
];

Callback function:

EnjoyHint provides onStart, onEnd and onBeforeStart callback functions, which perform custom operations before, after, and before each prompt begins, respectively.

Summary:

EnjoyHint is a powerful and easy-to-use tool that helps developers create interactive user guides and enhance user experience. Its flexible customization options and cross-browser compatibility make it ideal for web development projects.

(Please note: Since I do not have the ability to access external image links, the image cannot be displayed. Please replace the image link with the actual available link.)

The above is the detailed content of Hints Creation with EnjoyHint. For more information, please follow other related articles on the PHP Chinese website!