The aim of this article is to cover the process of creating hints for a website. Firstly, we'll take a look at how we can create a single hint for a proper website element. Then, we’ll create a sequence of hints to make a guided tour of a website. To create the hints I'll use EnjoyHint. As an example, I’ve made a simple demo using the Bootstrap framework.
EnjoyHint depends on jQuery and it requires a version of the library grater than or equal to version 1.7. Another dependency is KineticJS v5.1.0 which is already included into EnjoyHint, so there’s nothing to worry about.
If you want to check out the source code of the demo, you can visit this GitHub repository.
Why Using EnjoyHint?
EnjoyHint’s main goal is to give you an opportunity to help a user in finding his way through your web pages features. It can be pretty useful in case of a big web application with tons of elements.
You can highlight a single element and add a description to it, or take a user by the hand to show him all the available features one by one. With this library is also possible to change the shape of the highlighted area or to use your own style for the hint text. Here’s a list of its key features:
- Free to use
- Automatic focus and highlighting of the area related to the hint
- Different shapes of the highlighted area
- Hint delay property
- Possibility to resume the interrupted hint sequence
- Cross-browser support
- Support for Android, iOS, and Windows touch screens
With this in mind, it’s now time to write some code to see this library in action.
Continue reading %Hints Creation with EnjoyHint%
by Sergey Laptick via SitePoint
