40+ Tooltips Scripts With AJAX, JavaScript & CSS

Advertisement

Web users love informative clues. Whatever questions and misunderstandings might occur – delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips – used correctly, they can greatly improve user experience and help users to get things done. In Web such “responsive” hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for.

Most of solutions are JavaScript- and AJAX-based, however we’ve also managed to find some lightweight CSS-based solutions. To install and use the script, it’s often enough to include the JavaScript library in the source code and provide the hint as plain text within the “title”-attribute. Sometimes you can also insert URLs, images, tables and further elements – basically, it can be almost everything you’d ever wanted it to be.

We’d like to thank Jurgen Koller for compiling an extensive list of tooltip scripts1 we’ve stumbled upon during our search. It gives many useful pointers, but we’ve managed to find some more. You might be willing to use Koller’s post as a quick reference for your search.

Let’s take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. It’s nice to have them all in one place, once you need them. It’s nice to be able to find them, once you don’t have time to search for them.

Tooltips: AJAX & JavaScript Solutions

  • Nice Titles Revised2
    An improved Nice Titles Tooltip Script with Accesskeys support.
    Tooltips Scripts - Nice Titles revised | Blog | 1976design.com783
  • A lightweight prototype based JavaScript tooltip
    Tooltips Scripts - A lightweight prototype based JavaScript tooltip
  • Nice Titles4
    A classic. The script uses a background image.
    Tooltips Scripts - Nice titles795
  • AJAX-enabled Help-Balloons6Help windows in baloon-design. AJAXified version is also available.
    Tooltips Scripts - BeauScott AJAX-enabled Help-Balloons7
  • jTip – A jQuery Tool Tip8
    Extensive AJAX-based tooltips with numerous functions and presentation possibilities.
    Screenshot Tooltipp9
  • jQuery plugin: Tooltip10
    Enhances the jQuery Library.
    Screenshot Tooltipp8111
  • qTip12
    Works for all elements, not only for links in most browsers – IE 5.5+, Firefox, Safari and Opera.
    Tooltips Scripts - qTip › CSS › Learn › solarDreamStudios13
  • Form field hints with CSS Tooltips14
    t’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.
    Tooltips Scripts - Form field hints with CSS and JavaScript (Ask the CSS Guy)15
  • JS Tooltip16
    Displays customizable tool tip message for each link element on a web page. A tool tip that can be added to the anchor element unobtrusively by adding a class value to it. This was done by having the tool tip message pull from the specific title attribute of the anchor element that the tool tip was added too.
    Tooltips Scripts - Javascript Entry - Cody Lindley: Finding a Javascript Tool Tip Script17
  • BoxOver18
    Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading.
    Screenshot Tooltipp
    19
  • SuperNotes20
    Converts footnotes to tooltips. Appears immediately and can be assigned with a fixed position in the browser window.
    Screenshot Tooltipp
    21
  • Tipster22
    Multifunctional tool tips with JavaScript.
    Tooltips Scripts - Tipster Demonstration23
  • 5 Tooltips by DHTMLGoodies24
    First version is suppose to improve the usability of online forms:
    Screenshot Tooltipp
    25
  • The second technique uses AJAX.
    Screenshot Tooltipp
    26
  • Walter Zorns JavaScript, DHTML Tooltipps27
    These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified.
    Screenshot Tooltipp
    28
  • clueTip29
    This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley’s jTip script.
    Tooltips Scripts - clueTip : A jQuery Plugin30
  • Mootools Tooltip31
    Mootools Javascript example of using tooltips.
    Tooltips Scripts - Mootools Javascript Tooltips32
  • Sweet Titles33
    JavaScript Fading Tooltips.
    34
  • Hover Tip35
    Tooltip with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content.
    Tooltips Scripts - Hover-Tip: Tooltip You Can Mouse Over36
  • Multiline Tooltip with HTML, CSS and JavaScript37
    This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.
    Tooltips Scripts - texSoft.it - multiline tooltip with HTML CSS and JavaScript38
  • overLIB39
    This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available.
    Screenshot Tooltipp40
  • Scriptaculous Effect.Tooltip
    The tooltip script from the script.aculo.us41 library.
    Tooltips Scripts - Effect.Tooltip
  • Tooltip.js42
    Tooltipps with AJAX. The library uses the Prototype JavaScript Framework. The demo doesn’t work any longer.
    Tooltips Scripts - Tooltip.js - About43

CSS-Based Solutions

Further Solutions

  • Snap.com67
    Snap gives you a visual preview of each result before you click on it. And that improves your odds of picking the right search, without clicking back-and-forth several times.
    Tooltips Scripts - Snap68
  • DHTML Tooltips69
    Popup a help tip or information layer onmouseover using this object-based DHTML tooltip code. The basic version, presented on this page, can contain plain text or rich html, images, or images and text. The tooltip can be displayed over a background image. It can move with mouse movement. And it is easy to customize and modify.
    Tooltips Scripts - DHTML Tooltips: Pop-up Layer Onmouseover70
  • Animated Tooltip Javascript71
  • DOM Tooltip72
    DOM Tooltip Script-Library
  • Yahoo! UI Library: Tooltip73
    The Yahoo! UI Library Toolbox provides among other functions also tooltips.

Tooltips: WordPress-Plugins

Selected Scripts: Quick Overview

Tooltips Scripts - A lightweight prototype based JavaScript tooltip

Tooltips Scripts - Nice Titles revised | Blog | 1976design.com783

Tooltips Scripts - Nice titles795

Tooltips Scripts - BeauScott.com » Blog Archive » AJAX-enabled Help-Balloons80

Screenshot Tooltipp8111

Tooltips Scripts - Custom CSS Tooltips - loadaverageZero8245

Tooltips Scripts - CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com83

Footnotes

  1. 1 http://www.kollermedia.at/archive/2007/04/09/list-of-25-javascriptajax-css-tooltip-scripts/
  2. 2 http://www.1976design.com/blog/archive/2003/11/21/nice-titles/
  3. 3 http://www.1976design.com/blog/archive/2003/11/21/nice-titles/
  4. 4 http://www.kryogenix.org/code/browser/nicetitle/
  5. 5 http://www.kryogenix.org/code/browser/nicetitle/
  6. 6 http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/
  7. 7 http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/
  8. 8 http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip
  9. 9 http://www.codylindley.com/blogstuff/js/jtip/
  10. 10 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  11. 11 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  12. 12 http://solardreamstudios.com/learn/css/qtip
  13. 13 http://solardreamstudios.com/learn/css/qtip
  14. 14 http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html
  15. 15 http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html
  16. 16 http://codylindley.com/Javascript/219/finding-a-javascript-tool-tip-script
  17. 17 http://codylindley.com/Javascript/219/finding-a-javascript-tool-tip-script
  18. 18 http://boxover.swazz.org/
  19. 19 http://boxover.swazz.org/
  20. 20 http://www.twinhelix.com/dhtml/supernote/
  21. 21 http://www.twinhelix.com/dhtml/supernote/
  22. 22 http://www.twinhelix.com/dhtml/tipster/demo/
  23. 23 http://www.twinhelix.com/dhtml/tipster/demo/
  24. 24 http://www.dhtmlgoodies.com/index.html?page=tooltip
  25. 25 http://www.dhtmlgoodies.com/index.html?page=tooltip
  26. 26 http://www.dhtmlgoodies.com/index.html?page=tooltip
  27. 27 http://www.walterzorn.com/tooltip/tooltip_e.htm
  28. 28 http://www.walterzorn.com/tooltip/tooltip_e.htm
  29. 29 http://examples.learningjquery.com/62/#examplesection
  30. 30 http://examples.learningjquery.com/62/#examplesection
  31. 31 http://www.chrisesler.com/mootools/mootools-tooltip.html
  32. 32 http://www.chrisesler.com/mootools/mootools-tooltip.html
  33. 33 http://www.dustindiaz.com/sweet-titles/
  34. 34 http://www.dustindiaz.com/sweet-titles/
  35. 35 http://www.dyn-web.com/dhtml/tooltips/hover-tip.html
  36. 36 http://www.dyn-web.com/dhtml/tooltips/hover-tip.html
  37. 37 http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it
  38. 38 http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it
  39. 39 http://www.bosrup.com/web/overlib/
  40. 40 http://www.bosrup.com/web/overlib/
  41. 41 http://script.aculo.us/
  42. 42 http://tooltip.crtx.org/
  43. 43 http://tooltip.crtx.org/
  44. 44 http://loadaveragezero.com/vnav/labs/CSS/tooltips.php
  45. 45 http://loadaveragezero.com/vnav/labs/CSS/tooltips.php
  46. 46 http://www.communitymx.com/content/article.cfm?page=4&cid=4E2C0
  47. 47 http://www.communitymx.com/content/article.cfm?page=4&cid=4E2C0
  48. 48 http://css.experiments.severnsolutions.co.uk/dhtml/tooltips/
  49. 49 http://css.experiments.severnsolutions.co.uk/dhtml/tooltips/
  50. 50 http://mikecherim.com/experiments/css_menu_descriptions.php
  51. 51 http://mikecherim.com/experiments/css_menu_descriptions.php
  52. 52 http://mckay.cshl.edu/balloons3.html
  53. 53 http://mckay.cshl.edu/balloons3.html
  54. 54 http://lixlpixel.org/css_tooltip/
  55. 55 http://lixlpixel.org/javascript-tooltips/
  56. 56 http://lixlpixel.org/javascript-tooltips/
  57. 57 http://lixlpixel.org/css_tooltip/
  58. 58 http://www.mikezilla.com/exp0004.html
  59. 59 http://www.mikezilla.com/exp0004.html
  60. 60 http://trentrichardson.com/examples/csstooltips/
  61. 61 http://trentrichardson.com/examples/csstooltips/
  62. 62 http://psacake.com/web/jl.asp
  63. 63 http://fijiwebdesign.com/content/view/82/77/
  64. 64 http://fijiwebdesign.com/content/view/82/77/
  65. 65 http://www.cssplay.co.uk/menu/balloons.html
  66. 66 http://www.cssplay.co.uk/menu/balloons.html
  67. 67 http://www.snap.com
  68. 68 http://www.snap.com/
  69. 69 http://www.dyn-web.com/dhtml/tooltips/
  70. 70 http://www.dyn-web.com/dhtml/tooltips/
  71. 71 http://ashishware.com/Tooltip.shtml
  72. 72 http://www.mojavelinux.com/projects/domtooltip/
  73. 73 http://developer.yahoo.com/yui/container/tooltip/
  74. 74 http://bueltge.de/wp-bubble-tooltips-plugin/142/
  75. 75 http://web-graphics.com/mtarchive/001717.php
  76. 76 http://bueltge.de/wp-bubble-tooltips-plugin/142/
  77. 77 http://web-graphics.com/mtarchive/001717.php
  78. 78 http://www.1976design.com/blog/archive/2003/11/21/nice-titles/
  79. 79 http://www.kryogenix.org/code/browser/nicetitle/
  80. 80 http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/
  81. 81 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  82. 82 http://loadaveragezero.com/vnav/labs/CSS/tooltips.php
  83. 83 http://mikecherim.com/experiments/css_menu_descriptions.php

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Nice work!!! great tools for website ;)

    0
  2. 102

    Please send me tooltip for form of HTML

    -2
  3. 203

    Isfan Habib (Irfan Ahmad)

    April 14, 2010 1:04 am

    Wonderful work done by U.
    Thank You very much!
    I was looking for ToolTip.

    0
  4. 304

    nice article
    but I prefere CSS based solution :-)
    thanx

    -1
  5. 405

    Wow….complete tooltip list. Thanks

    0
  6. 506

    great, here you have another page with a lot of script and ajax examples
    Ajax Examples

    0
  7. 607

    I like tooltips. I’m using this http://www.javascriptkit.com/script/script2/ajaxtooltip.shtml
    I made a little modify, then I used in some pages in this site I made:
    in this page, it’s really cool
    http://www.logoarena.com/logo-contests/livid-lemur-n36

    thanks
    Max.

    2
  8. 708

    Great Site. Love that good looking girl that left a comment called “CATZIE”

    -1
  9. 809

    Hi Guys, i have problem with tooltip, can some help me ,

    i want a tooltip on when i drag and select a paragraph text the tooltip comes in center of the selected text. please help me i am really fade up of this.

    please help! help! help!

    2
  10. 910

    Fabulous list!!! Check out this tool – walkme.com – it is really helpful for those, like me, who aren’t very techy! :)
    It’s customizable, real easy to integrate into your site, and is interactive with the user.

    2
  11. 1011

    Awesome post. Thanks for sharing. I can surely use this info.

    Ajax application development

    0
  12. 1112

    Logo Designer « Chris

    November 15, 2012 12:40 am

    II like that you said “when you need them”. I think some stuff is only necessary when needed and shouldn’t be placed just to be placed. Great list

    Chris

    0
  13. 1213

    nice collection …. But it look some old. :o

    0
  14. 1314

    In the Page Notes approach to tooltips, the appearance of a tooltip is controlled by a tooltip template, which consists of a tooltip skin and a placement specification. The tooltip skin is an HTML object that specifies how the tooltip will be displayed. The placement specifies where the tooltip will be displayed. Tooltips may contain arbitrary HTML fragments, implying that they may themselves contain tooltip targets (i.e., “nested tooltips”). The placement specification allows for tooltips to be displayed either above and below the tooltip target, which allows for meaningfully nested tooltip targets. The Page Notes mechanism requires no user-supplied JavaScript. – More info at http://pagenotes.com/pagenotes/tooltipTemplates.htm

    0
  15. 1415

    How about a CSS tooltip library called Hint.css: http://kushagragour.in/lab/hint/
    (Note: I am the author)

    0
  16. 1516

    And mixed solutions javascript+css? , I think is the best. Pure css animations for the tooltip, and control+positions+more events in javascript. I don´t think a pure css tooltip will be better for all situations and web pages.
    If you need open click animations, or customs events to close and open….. you have to use javascript….yes or yes. ;-)

    I use this, it is quite new, and i´m very happy, but you have to pay it:
    jqEasytooltip
    http://codecanyon.net/item/jqeasytooltip-jquery-tooltip-plugin/6585688

    I use it for googlemaps and works pretty well.

    Codecanyon begins to have enough interesting things.

    0
  17. 1617

    Hi Shery,

    Its really nice site… so many Ajax samples…
    Thanks a lot..

    0

↑ Back to top