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!
Gips Parameters
- 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
Using Gips
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Clean and Minimal Tooltip Plugin: Gips</title>
<link href="css/gips.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/gips.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input#purple').gips({ 'theme': 'purple', autoHide: true, text: 'This is purple tooltip, auto hide after pausess time elapses.' });
$('input#green').gips({ 'theme': 'green', placement: 'left' });
$('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
$('input#red').gips({ 'theme': 'red', placement: 'bottom' });
});
</script>
</head>
<body>
<div id="center">
<div id="header">
</div>
<div id="demo">
<input type="text" value="Purple Tooltip Here." id="purple" />
<input type="text" value="Green Tooltip Here." id="green" />
<input type="text" value="Yellow Tooltip Here." id="yellow" />
<input type="text" value="Red Tooltip Here." id="red" />
</div>
</div>
</body>
</html>
Pingback: Blog de Avízpate – 7 plugins jQuery que te harán el trabajo más simple
Pingback: Δωρεάν jQuery Tooltip Plugins - Web Design Forum
Pingback: 20 Useful Free jQuery Tooltip Plugins
Pingback: 5 Awesome jQuery Plugins for Better User Experiences
Pingback: 13 Awesome jQuery Plugins for Better User Experiences
Pingback: 四五外包 » 13 个帮助你简化开发的 jQuery 插件
Pingback: 34 Useful HTML5 & CSS3 Tutorials
Pingback: Modern UI Style Design byMicrosoft
Pingback: youngmoony | 10 jQuery Plugins that Will Make your Life Easier
Pingback: jQuery: 10 plugin che vi renderanno la vita più facile!
Pingback: 25 Best Free jQuery Tooltips Plugins
Pingback: 25 个新鲜和非常有用的 jQuery 插件 – 90互联网数据中心
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Santhoshweb
Pingback: 帮助你简化开发的jQuery插件 | Viking's Blog
Pingback: Latino » Blog Archive » 7 plugins jQuery que te harán el trabajo más simple
Pingback: 爱果果 » 30个漂亮的jquery效果欣赏
Pingback: 2012年30个新鲜和杰出的jQuery的影响摘要 | 我们爱网页设计
12/09/2012 @ 4:42 pm
Great plugin! I’m a firm believer in utilizing tooltips on web forms for enhanced usability. I’ll give gips a try!
Pingback: 推荐17个优美新鲜的jQuery的工具提示插件 | licqi IT技术
Pingback: 推荐17个优美新鲜的jQuery的工具提示插件 | 编程·早晨
Pingback: 17 Beautiful and Fresh jQuery Tooltip Plugins
Pingback: 10 jQuery Plugins for Tooltip, Nestable and Grid | jQuery
Pingback: » 20 jquery plugins misti - PYG studio
Pingback: 3 jquery tooltips plugins | Dandy Web Solution Blog
Pingback: 13个网页设计师喜爱的jQuery插件 | 设计狂
Pingback: 爱果果 » 13 个帮助你简化开发的 jQuery 插件
Pingback: 15 Most Effective Jquery plugins For Designers | TEKNQ
Pingback: Top 20 jQuery plugins which makes your business simpler | webdesigncompany.com
Pingback: 7 plugins jQuery que te harán el trabajo más simple | CITYGEEK
Pingback: 15 Most Effective Jquery plugins For Designers | Design Inspiration. Free Resources & Tutorials
Pingback: 7 plugins jQuery que te harán el trabajo más simple « Blog de xkortazar
Pingback: 7 plugins jQuery que te harán el trabajo más simple « human being | #IN.per.fec.cion®
Pingback: 7 plugins jQuery para un proyecto de diseño web mas simple y atractivo | LivPost
Pingback: » 7 plugins jQuery que te harán el trabajo más simple (Pablo Gallego Falcón)
Pingback: 7 plugins jQuery que te harán el trabajo más simple | El Tenanpa
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Home Page Technologies
Pingback: 10 plugins de jQuery que harán tu vida más fácil | Blog JZE STUDIO.
Pingback: 7 plugins jQuery que te harán el trabajo más simple Noticias
Pingback: 7 plugins jQuery que te harán el trabajo más simple | SinapsysMx.net
Pingback: 7 plugins jQuery que te harán el trabajo más simple « Prototipo
Pingback: 7 plugins jQuery que te harán el trabajo más simple - Misiongeek
Pingback: 7 plugins jQuery que te harán el trabajo más simple | El Tenanpa
Pingback: 7 plugins jQuery que te harán el trabajo más simple | www.cyanogenmod.info
Pingback: 7 plugins jQuery que te harán el trabajo más simple | 18minutos
Pingback: 7 plugins jQuery que te harán el trabajo más simple
Pingback: 7 plugins jQuery que te harán el trabajo más simple
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Web design
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Unify Hosting Promo Quest
Pingback: 10 jQuery Plugins that Will Make your Life Easier « Creative Web Sole
Pingback: jQuery: Notification-Leisten und Tooltipps mit Notify und Gips - Dr. Web Magazin
Pingback: UK Web Design Now! » Post Topic » 10 jQuery Plugins that Will Make your Life Easier
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Cheapest Web Design
Pingback: 10 jQuery Plugins that Will Make your Life Easier | TEKNQ
Pingback: 10 jQuery Plugins to make your life easier | Pure Awesomeness
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Lunarium Design
Pingback: 10 jQuery Plugins that Will Make your Life Easier | WebScriptPlus.com
Pingback: 10 jQuery Plugins that Will Make your Life Easier @ zuminteractive.com
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Evolve Inc
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Bitmag
Pingback: 10 jQuery Plugins that Will Make your Life Easier
Pingback: » 10 jQuery Plugins that Will Make your Life Easier Akira Designs
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Sphinx Web Design Experts
Pingback: 10 jQuery Plugins that Will Make your Life Easier | tecBird
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Guess Host
Pingback: 10 jQuery Plugins that Will Make your Life Easier » We Love Brisbane – Website Design
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
Pingback: 10 jQuery Plugins that Will Make your Life Easier | Tools
Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | CS5 Design
Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | pixelpush design
Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | TEKNQ
Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | PHP Developer Resource
Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
Pingback: 25 Best Free jQuery Tooltips Plugins - Code Fear
Pingback: とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」 | bl6.jp
Pingback: Hiệu ứng jQuery nổi bật năm 2012 « share2vn
Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler
Pingback: CSS – JQUERY – SLIDE SHOW – IMAGE EFFECT » “jQuery Colorful Tooltips plugin”
21/04/2012 @ 2:54 am
A very neat effect, can I use the plug-in for navigation menus, or only for styling textboxes?
21/04/2012 @ 5:10 am
You can use it with any element you like
Pingback: Tooltips simples, rápidos y elegantes con jQuery gips
Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler » Web Design
Pingback: jQuery Clean and Simple Tooltips: gips | TEKNQ
23/03/2012 @ 12:01 pm
Hi, how could i make the tooltip show on hover and hide the tooltip when i remove the mouse over?
25/03/2012 @ 8:15 pm
It works the same way, check it out again on the demo page.
Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials | StevenCodes
Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials
14/02/2012 @ 12:45 pm
Thank you for sharing such a useful plugin. It saved a lot of my time.
I have placed three textboxes in a row and applied gips on the last textbox, I am having a position issue. Please refer to this link for more details:
http://www.greepit.com/gips-demo
Looking forward for your reply.
Thanks!
14/02/2012 @ 12:50 pm
I’ve updated the script with the fix, you can download the latest script.
20/01/2012 @ 2:57 pm
Hi what should I do if I would like to do like this, on hover i would like to show just a tool tip with out close button on clicking I would like to pop up a tool tip with close button .
20/02/2012 @ 8:47 am
Gips doesn’t support specifying event right now.
19/01/2012 @ 11:39 pm
Hi Dear…
Thanks for all works.. I liked all..
Bu I want ask a question; How can I use gips with mouseover or OnBlur mode..??
for example I want use;
Best Regards.
20/01/2012 @ 6:34 am
It already works with mouseover.
18/01/2012 @ 10:54 pm
I tried using this in my MVC application. However, it only works on IE. Doesn’t seem to work on Chrome and Firefox. What am I missing?
20/02/2012 @ 8:48 am
There was a little issue with position that caused it to stop working for some scenarios in some browser. You can download the latest code with the fix.
Pingback: Javascript | Pearltrees
Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler | | WP-C(h)ronicleWP-C(h)ronicle
18/01/2012 @ 12:23 pm
Very straightforward solution. I like the markup too.
Most tooltip solutions require tons of BS to go through so I will give this a go in my next project.
18/01/2012 @ 9:10 am
Hi there,
I suggest you do not use an image for the close tag. Its hard to style it using CSS. I suggest you use something like to add the close button.
20/02/2012 @ 8:54 am
Thanks for the valuable suggestion. I’ll definitely incorporate it in to gips.
24/06/2012 @ 8:34 pm
I agree. I’m keeping all my icons in a single sprite sheet to reduce http requests. I’ve changed line 18 in the plugin to be a span, then I’ve used a background image in the CSS (+width and height). I’d also recommend getting rid of all the extra space in the css for all the single declarations.
Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications
Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications