jQuery Clean and Simple Tooltips: gips
Today, World Wide Web has emerged as the new place where all the game is happening – sale, branding, customer service etc. In fact, internet is rapidly becoming de facto medium for broadcasting information, engaging customers and creating new avenues for the business. However, leveraging the media for business or for any other purpose is a bit tricky because a huge number of internet users are still not familiar or comfortable with this ‘virtual’ world. So much so that over the last few years online banking has attracted 6.3 million users, but a massive 3.1 million of those have closed their accounts already due to poor website design and inefficient service. ( Internet Money Issue 4).
This is an eye-opener for web designers and developers. It also creates the need for a simple and usable web design that everybody can understand. Obviously no product or website/web application (for that matter) can be so intuitive that everybody can use it. This is like a product that sells itself which is improbable. There is always need to improve design and add elements that make it easy for users to understand and use the website/web application. This is where the concept of ‘instructional design’ comes in. The art of instructional design tells us techniques for producing what users actually want – simple and usable products.
There are a number of very simple techniques that you can incorporate in your design to make your products easy. For instance, you can use tool tips to instruct your users without deviating them away from the application. Today’s freebie is a simple jQuery plugin for tooltips that can be embedded in any web design. We call it Gips.
Gips is a clean and simple jQuery plugin and is based on Gips Freebie. Its simple, customizable, and easy to use. It also supports CSS themes.
You can also find a website design company near you and hand over your website design requirements to an expert!
- text: Tool tip text
- delay: Pause time before gips appears
- autoHide: When true tool tip will automatically disappear
- pause: Display time, specific for autHide mode
- animationSpeed: Tool tip appear/disappear speed
- placement: Tool tip placement e.g top, bottom, right and left/li>
- theme: CSS theme for tool tip, predefined themes are purple, green, yellow and red
- imagePath: Image path from close button image
In your HTML file add the following references in the head section.
- Add a reference to latest jQuery script
- Add a reference to gips.js file
- Add a reference to gips.css file
Attach gips with any HTML element using gips initializer function. Here is the complete code.