Fork me on GitHub
Post Format

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!

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>

No related posts.

103 comments

  1. Pingback: 10 jQuery Plugins to make your life easier - Gregory Brumann

  2. Pingback: Blog de Avízpate – 7 plugins jQuery que te harán el trabajo más simple

  3. Pingback: Δωρεάν jQuery Tooltip Plugins - Web Design Forum

  4. Pingback: 20 Useful Free jQuery Tooltip Plugins

  5. Pingback: 5 Awesome jQuery Plugins for Better User Experiences

  6. Pingback: 13 Awesome jQuery Plugins for Better User Experiences

  7. Pingback: 四五外包 » 13 个帮助你简化开发的 jQuery 插件

  8. Pingback: 34 Useful HTML5 & CSS3 Tutorials

  9. Pingback: Modern UI Style Design byMicrosoft

  10. Pingback: youngmoony | 10 jQuery Plugins that Will Make your Life Easier

  11. Pingback: jQuery: 10 plugin che vi renderanno la vita più facile!

  12. Pingback: 25 Best Free jQuery Tooltips Plugins

  13. Pingback: 25 个新鲜和非常有用的 jQuery 插件 – 90互联网数据中心

  14. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Santhoshweb

  15. Pingback: 帮助你简化开发的jQuery插件 | Viking's Blog

  16. Pingback: Latino » Blog Archive » 7 plugins jQuery que te harán el trabajo más simple

  17. Pingback: 爱果果 » 30个漂亮的jquery效果欣赏

  18. Pingback: 2012年30个新鲜和杰出的jQuery的影响摘要 | 我们爱网页设计

  19. Pingback: 推荐17个优美新鲜的jQuery的工具提示插件 | licqi IT技术

  20. Pingback: 推荐17个优美新鲜的jQuery的工具提示插件 | 编程·早晨

  21. Pingback: 17 Beautiful and Fresh jQuery Tooltip Plugins

  22. Pingback: 10 jQuery Plugins for Tooltip, Nestable and Grid | jQuery

  23. Pingback: » 20 jquery plugins misti - PYG studio

  24. Pingback: 3 jquery tooltips plugins | Dandy Web Solution Blog

  25. Pingback: 13个网页设计师喜爱的jQuery插件 | 设计狂

  26. Pingback: 爱果果 » 13 个帮助你简化开发的 jQuery 插件

  27. Pingback: 15 Most Effective Jquery plugins For Designers | TEKNQ

  28. Pingback: Top 20 jQuery plugins which makes your business simpler | webdesigncompany.com

  29. Pingback: 7 plugins jQuery que te harán el trabajo más simple | CITYGEEK

  30. Pingback: 15 Most Effective Jquery plugins For Designers | Design Inspiration. Free Resources & Tutorials

  31. Pingback: 7 plugins jQuery que te harán el trabajo más simple « Blog de xkortazar

  32. Pingback: 7 plugins jQuery que te harán el trabajo más simple « human being | #IN.per.fec.cion®

  33. Pingback: 7 plugins jQuery para un proyecto de diseño web mas simple y atractivo | LivPost

  34. Pingback: » 7 plugins jQuery que te harán el trabajo más simple (Pablo Gallego Falcón)

  35. Pingback: 7 plugins jQuery que te harán el trabajo más simple | El Tenanpa

  36. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Home Page Technologies

  37. Pingback: 10 plugins de jQuery que harán tu vida más fácil | Blog JZE STUDIO.

  38. Pingback: 7 plugins jQuery que te harán el trabajo más simple Noticias

  39. Pingback: 7 plugins jQuery que te harán el trabajo más simple | SinapsysMx.net

  40. Pingback: 7 plugins jQuery que te harán el trabajo más simple « Prototipo

  41. Pingback: 7 plugins jQuery que te harán el trabajo más simple - Misiongeek

  42. Pingback: 7 plugins jQuery que te harán el trabajo más simple | El Tenanpa

  43. Pingback: 7 plugins jQuery que te harán el trabajo más simple | www.cyanogenmod.info

  44. Pingback: 7 plugins jQuery que te harán el trabajo más simple | 18minutos

  45. Pingback: 7 plugins jQuery que te harán el trabajo más simple

  46. Pingback: 7 plugins jQuery que te harán el trabajo más simple

  47. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Web design

  48. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Unify Hosting Promo Quest

  49. Pingback: 10 jQuery Plugins that Will Make your Life Easier « Creative Web Sole

  50. Pingback: jQuery: Notification-Leisten und Tooltipps mit Notify und Gips - Dr. Web Magazin

  51. Pingback: UK Web Design Now! » Post Topic » 10 jQuery Plugins that Will Make your Life Easier

  52. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Cheapest Web Design

  53. Pingback: 10 jQuery Plugins that Will Make your Life Easier | TEKNQ

  54. Pingback: 10 jQuery Plugins to make your life easier | Pure Awesomeness

  55. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Lunarium Design

  56. Pingback: 10 jQuery Plugins that Will Make your Life Easier | WebScriptPlus.com

  57. Pingback: 10 jQuery Plugins that Will Make your Life Easier @ zuminteractive.com

  58. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Evolve Inc

  59. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Bitmag

  60. Pingback: 10 jQuery Plugins that Will Make your Life Easier

  61. Pingback: » 10 jQuery Plugins that Will Make your Life Easier Akira Designs

  62. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Sphinx Web Design Experts

  63. Pingback: 10 jQuery Plugins that Will Make your Life Easier | tecBird

  64. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Guess Host

  65. Pingback: 10 jQuery Plugins that Will Make your Life Easier » We Love Brisbane – Website Design

  66. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  67. Pingback: 10 jQuery Plugins that Will Make your Life Easier | Tools

  68. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | CS5 Design

  69. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | pixelpush design

  70. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | TEKNQ

  71. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | PHP Developer Resource

  72. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  73. Pingback: 25 Best Free jQuery Tooltips Plugins - Code Fear

  74. Pingback: とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」 | bl6.jp

  75. Pingback: Hiệu ứng jQuery nổi bật năm 2012 « share2vn

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

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

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

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

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

  81. Hi, how could i make the tooltip show on hover and hide the tooltip when i remove the mouse over?

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

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

  84. 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
  85. 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
  86. 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
  87. 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
  88. Pingback: Javascript | Pearltrees

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

  90. 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
    • 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.

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

  92. 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 *.


× four = 28