Fork me on GitHub
Post Format
January 14, 2012

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.

jQuery clean and minimal tooltips Gips

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>
View Demo

Related posts:

  1. jQuery Plugin for On-demand Search Box: SeacrhMeme
  2. jQuery Strong Password Plugin: Power PWChecker
  3. Multi Level Hierarchical jQuery Menu: jQSimpleMenu
  4. jQuery Credit Card Validation Plugin: Smart Validate
  5. Free Multi-Node Range and Data Slider: JQ Slider

26 comments

  1. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler

  2. Pingback: CSS – JQUERY – SLIDE SHOW – IMAGE EFFECT » “jQuery Colorful Tooltips plugin”

  4. Pingback: Tooltips simples, rápidos y elegantes con jQuery gips

  5. Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler » Web Design

  6. Pingback: jQuery Clean and Simple Tooltips: gips | TEKNQ

  7. Herschle

    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?

    Reply

  8. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials | StevenCodes

  9. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

  10. Sarfraz

    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!

    Reply
  11. Dorababu

    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 .

    Reply
  12. Sefa OZMEN

    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.

    Reply
  13. Rodel

    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?

    Reply

  14. Pingback: Javascript | Pearltrees

  15. Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler | | WP-C(h)ronicleWP-C(h)ronicle

  17. Ant Ekşiler

    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.

    Reply

  18. Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications

  19. Pingback: jQuery Clean and Simple Tooltips: gips | EGrappler - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications

Leave a Reply

Required fields are marked *.

*