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': '點(diǎn)擊此按鈕切換搜索結(jié)果',
    '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': '這是網(wǎng)站標(biāo)題'},
    {'key #mySearch': '在此輸入搜索關(guān)鍵詞，按Enter鍵搜索', 'keyCode': 13},
    {'click .btn': '點(diǎn)擊這里切換搜索類型'},
    {'next .about': '關(guān)于我們', 'shape': 'circle', 'radius': 70},
    {'next .contact': '歡迎反饋', 'showSkip': false} // 最后一個(gè)提示，隱藏跳過按鈕
];

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!