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 Link

  • 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 Tooltipp21
  • 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 Tooltipp25
  • The second technique uses AJAX.
    Screenshot Tooltipp26
  • 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 Tooltipp28
  • 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 Link

Further Solutions Link

  • 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 Link

Selected Scripts: Quick Overview Link

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 Link

  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 UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Thanks!

    I prefere CSS based solution :)

    -1
  2. 2

    Once again great article! Thanks

    0
  3. 3

    True collection of tooltips…..Crazy well done…

    -3
  4. 4

    A very thorough article indeed (as always I hasten to add!). I’ve recently posted an article entitled Form Field Best Practise and Hints to Assure Wary Users which touches on some of the methods explained here, although the main focus of my article is around the checkout process and form completions, with this being such a crutial aspect to the conversion and drop out rates of e-commerce sites across the board.

    Keep up the excellent work!

    -3
  5. 5

    Nice!
    CSS RoX!

    0
  6. 6

    The tooltips are in your base already, killing your dudes!

    I personally do not prefer such overly elaborate tooltips. They are ok if they are toned down and only applied where it counts, like when you really doubt a user’s ability of handling text areas.

    2
  7. 7

    awesome – as always! so handy to know these articles are out there when a project needs them. great blog, made it to the main tab of my igoogle :)

    -3
  8. 8

    Nice, always a need for a good tool tip, especially strictly css based.

    5
  9. 9

    yawn. what about title=””. Not dependent on JS.

    -4
  10. 10

    Great article, Pretty confident I will be referring to it a lot in future!
    Thanks

    0
  11. 11

    One day, the whole internet will be on tool tips … eating our megahertz and killing the pleasure to move the mousse over.

    -5
  12. 12

    Considering the way people use “tool tips” for inline advertising, I treat them the same way as I do pop-ups – get rid of them ASAP. I think Lapin’s right; if tool tips take over, I’m starting to navigate with my keyboard.

    1
  13. 13

    I don’t like or recomend the use of javascript, because each browser have diferent ways on handling javascript, sometimes you can see huge diferences in diferent versions of the same browser, css it’s more standard so i prefere CSS….

    But, good selection any way!!!

    -5
  14. 14

    Sweet Jesus, a twofer. We’re looking to add some tips to TekTag, and this is a nice potpourri. Plus we’ve added it to our CSS bookmarks for our CSS subscribers. Thanks.

    1
  15. 15

    The best one is from nicertitle> The best tooltip should be easy to implement without the need to create separate div containers to add the text of the tooltip. The nicertitle tooltip is exactly the one that would suit everyone’s need. Just fill the title attibute, that’s enough…

    -5
  16. 16

    Thanks guys for the back link to my site, love your lists. :)
    Jürgen

    -1
  17. 17

    Sweet! Thanks for all the great tool tip scripts.

    -2
  18. 18

    Jen, please publish your “collection of good stuff” :-)
    Would be very greatful for it!

    0
  19. 19

    A few of these are “old”, but.. most of all are good.. I need to sort through my bookmarks.. I have like 40+ “collections of good stuff”… ;P

    0
  20. 20

    like usual thank you smashing magazine :)

    -1
  21. 21

    What about the classic “title” attribute you can use in all existing tags? It’s the best tooltip to use: no css/javascript or whatsoever, search engines can read it, it adds metadata to your content, and all users know its use from Windows.

    Just make a span-tag, maybe give it a different style, and use the ‘title’ attribute in it.

    -1
  22. 22

    I find these tooltips to be one of the “new annoyances” of the web. Please use only CSS based solutions if you must use tooltips, and include an option to turn them off if you are using them all over the place. Thank you

    -4
  23. 23

    Thanks, great selection

    -2
  24. 24

    I think you missed one of my faves — CSS-based tooltips from Stu Nicholls at CSSplay.

    http://www.cssplay.co.uk/menu/tooltips

    -1
  25. 25

    Good article :)

    -1
  26. 26

    Nice Write Up.

    There are more Ajax lib at http://miniajax.com

    Hope it Useful.

    0
  27. 27

    Would be good to add some guidelines for those people who has no idea how to make tool tips to look attractive and not annoying.

    2
  28. 28

    You know the screenshot of the ‘Snap.com’ one? Where did that come from? Which site?

    -1
  29. 29

    This was of great help……

    -2
  30. 30

    thanks for you efforts
    i know a website just full with ajax project and it’s all free
    http://www.ajaxdaddy.com/

    0
  31. 31

    Holly smokes! So many tooltips – so much more annoyance :-(

    -2
  32. 32

    I didn’t know, that there are so many tooltip-code-snippets out there.
    But I don’t really like most of them. I think one reason is, that they use all a non-default design.

    In my point of view, the user should always get the default look and feel. If the title-tag is not enough for some advanced cases, then I will fall back to non-default ways to achieve my goal.

    What I really like is the form-field-tooltip. This is very useful, but not a real tooltip in my opinion. But I will think about it, when I design my next form.

    Keep the good posts comming ;)

    0
  33. 33

    Wow awesome resource… was just about to go around and search for some tooltip examples

    0
  34. 34

    yet another great list from smashingmagazine, i prefer CSS based, just incase javascript is disabled.

    -1
  35. 35

    Great selection, thanks.

    I’m curious though, is there any way of retrieving screen shots of sites without using Snap.com?

    0
  36. 36

    As much as everyone here is bashing on js tooltips it seems that those intext ads that are similar to tooltips have no problems working no matter what browser i’m on.

    0
  37. 37

    Another one – AJAX-based Thesaurus Tooltip (
    http://cmsdevelopment.com/thesaurus/ ). By the way it’s got PHP Programming Innovation Award November 2006 on phplasses.org

    0
  38. 38

    Another one is rightContext. More of a context menu but since it can be triggered by roll overs it can also be used as a suprecharged tooltip.

    RightContext

    Harel

    -1
  39. 39

    I prefer CSS. Thanks for the list!

    1
  40. 40

    Why bother building in tooltips?
    Just add a title and/ alt tag to each image or link.

    Much easier!

    0
  41. 41

    Whatabout cotojatka? (web is in Czech only.. just hover some link or abbr…)

    -1
  42. 42

    Great list n resource. Damn cool! Thank you! That’s what i needed actually.

    1
  43. 43

    Have a look at track-issue.com, which is Ajax enabled, built on asp.net, prototype and scriptaculous frameworks. This site offers free issue tracking system

    0
  44. 44

    http://www.miniajax.com/ just useful reference. A showroom of nice looking simple downloadable DHTML and AJAX scripts

    -1
  45. 45

    Here’s another nice tool tip / website image preview – http://www.artviper.net/news.php or http://www.artviper.net/tools.php, it shows an image of the website the link goes to and in addition the title tag as description. Mootools based.

    0
  46. 46

    Oh yes!!! This is the article I was waiting for! ;) great!

    1
  47. 47

    Hi I just want to ask how can I add a heperlink in CSS Bubble tooltip which takes to you another page. I have tried it but I could not solve the problem. Can you please help me out with this problem.

    As I tried when take mouse on the bubble tool the text remained unselected.

    Thanking YOu IN Advance.

    venky

    1
  48. 48

    WOW! This is bookmarked! I really like this ToolTip pimpin’!

    0
  49. 49

    Hi, could you please remove these advertisements ? It’s quite disturbing to get redirected to a site where the “sourcecode” is directly connected to urls of the creators, who mostly have created these scripts just to get famous with their url, although the original sourcecode is available everywhere. Anyway, nice work.

    0
  50. 50

    woah! great list i found the script i was looking for thanks a lot!

    0

↑ Back to top