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 topShare on Twitter

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

    Thanks!

    I prefere CSS based solution :)

    -1
  2. 2

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

    3
  3. 3

    Once again great article! Thanks

    0
  4. 4

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

    -3
  5. 5

    True collection of tooltips…..Crazy well done…

    -3
  6. 6

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

    Nice!
    CSS RoX!

    0
  8. 8

    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
  9. 9

    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!!!

    -4
  10. 10

    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…

    -4
  11. 11

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

    -2
  12. 12

    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
  13. 13

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

    0
  14. 14

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

    -5
  15. 15

    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
  16. 16

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

    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.

    1
  21. 21

    like usual thank you smashing magazine :)

    -1
  22. 22

    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
  23. 23

    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
  24. 24

    Thanks, great selection

    -2
  25. 25

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

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

    -1
  26. 26

    Good article :)

    -1
  27. 27

    Nice Write Up.

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

    Hope it Useful.

    0
  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
  51. 51

    the following code works when the mouseovers on the box,but i want tooltip to be displayed when mouseoverson options,can pls somebody help,i am new to javascript and i am facing this problem

    function ShowToolTip(ToolTipText,index) {
    var MyToolTip=document.all[“DHTMLToolTip”];

    MyToolTip.innerHTML=ToolTipText;

    MyToolTip.style.visibility=”visible”;

    return true;
    }

    function HideToolTip() {
    var MyToolTip=document.all[“DHTMLToolTip”];

    MyToolTip.style.visibility=”hidden”

    return true;
    }

    Off
    Low
    Med.
    High

    1
  52. 52

    a very nice tootips , thank you

    2
  53. 53

    WOW! Crazy! And what we to do?! Copies?
    I prefer AJAX – maybe sometimes disabled – but over 70% ON!

    1
  54. 54

    Ahsan Khurshid Rathore

    February 5, 2008 10:27 pm

    Really very useful article, and very cool tooltips. Great!

    0
  55. 55

    FYI,
    I’ve updated the “Ajax-Enabled Help Balloons” component to version 2.0 (now called just HelpBalloon.js).
    Enjoy!

    Beau Scott

    1
  56. 56

    Excellent article, used a few of these before but the article has opened me up to lots of new ideas. Thanks.

    -1
  57. 57

    Really, the above collections are amazhing, its very userful for me and will show different views from others.i got a lot of new ideas because of refered this collections.Great..

    0
  58. 58

    the right tutorial in the right time, thanks

    0
  59. 59

    i like all bro, that’s nice effect for ur eye

    0
  60. 60

    Very Complete, Thanks !

    0
  61. 61

    Mohammad Zargaripour

    July 3, 2008 3:17 pm

    Very good
    Tanx

    0
  62. 62

    Pop goes the tooltip! Yay! =]

    0
  63. 63

    Guilherme Mattos

    August 8, 2008 5:38 am

    Fantastic!

    0
  64. 64

    This list has been a major help. I have been looking all over the net for decent tooltips. I appreciate this site as it highlights that which deserves to be highlighted. Nice work!

    0
  65. 65

    Wow………..!
    Great… n CSS really rocks..
    Thnx….

    0
  66. 66

    good!!! :)

    0
  67. 67

    nice! i always use sweet titles. now i can have more options. thanks for that :)

    -1
  68. 68

    thanks you very much for important sources: i use at my website Cambodia Tourism

    -1
  69. 69

    very very useful… thanks guys…….

    1
  70. 70

    thank you!

    -1
  71. 71

    good javascript tooltips

    November 19, 2008 3:18 am

    good javascript tooltips http://www.Scriptremix.com

    -2
  72. 72

    Amazing article!!! But why it is not popular? They’re have bad luck I think.

    0
  73. 73

    Wooow very complete list of tooltip javascript. I’glad for this information. Smashing Magazine is the best source information in the Net :). And i’m choose Mootools Tool tips for include into my Website.Couse this tooltip very simple and elegant . One again i say thanks.

    0
  74. 74

    Wooovv Very Good Tooltips script thx.

    0
  75. 75

    How do you create a horizontal scrollbar in a listbox: ASP.NET of course using CSS

    -1
  76. 76

    AJAX and Javascript is redundant since AJAX is Asynchronous JavaScript And Xml.

    -1
  77. 77

    thanks for these useful codes

    -1
  78. 78

    they are great tool

    -1
  79. 79

    I prefer CSS based solution. Thanks anyway

    0
  80. 80

    nice set, i am a little javascript heavy at the moment so a cs solution looks like the way to go

    0
  81. 81

    thx for the information :)

    0
  82. 82

    Nice!

    0
  83. 83

    great article thanx.

    0
  84. 84

    There is one more nice tooltip – http://www.taggify.net . It allows to add tooltips for the part of the image -border is drawn around the object on the image and other parts it’s faded. Cool thing for marking people on the photo as in facebook .

    -1
  85. 85

    I think the word WOW suites for this Post Simply Super

    -1
  86. 86

    how to have links in bubble tooltip.. can u give some idea..

    0
  87. 87

    Im looking for a tooltip which can display contents of .txt file on my server. Any recommendations?

    0
  88. 88

    Hey, this helps a lot. Thank you. :D

    0
  89. 89

    O ye mi kuzze ve go. Zupper olmis bu

    -1
  90. 90

    Hi, http://ajaxden.net is also a good site for free AJAX scripts!

    -3
  91. 91

    Thanks for a very nice collection to tooltip tools. I’ve done a lot of searching and this is the most comprehensive I’ve found. I’ve created a tool that might interest some of you. It generates tooltips from a glossary you create in a text file . It has been used primarily in online courses at the university I work for. Glossary-JS.

    -1
  92. 92

    oh thax a lot

    0
  93. 93

    Thanks! nice post

    -1
  94. 94

    Very useful list with tooltips, I am going to use something like this on my website!!

    0
  95. 95

    Great compliation. I was looking for some examples and spent one hour before i found this….And it contains all the best ones i found !!!

    Keep the good work..

    0
  96. 96

    Think you’ve got enough tooltips in there?

    -1
  97. 97

    You saved my day!

    0
  98. 98

    Here are some nice HTML tooltip examples. They have been visually customized through the GUI of another useful tool called Likno Web Tooltips Builder:
    likno.com/jquery-tooltips/index.php

    0
  99. 99

    Very Useful .. Good Job

    0
  100. 100

    Very good collections

    -1
  101. 101

    Nice work!!! great tools for website ;)

    0
  102. 102

    Please send me tooltip for form of HTML

    -1
  103. 103

    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
  104. 104

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

    -1
  105. 105

    Wow….complete tooltip list. Thanks

    0
  106. 106

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

    0
  107. 107

    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
  108. 108

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

    -1
  109. 109

    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
  110. 110

    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
  111. 111

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

    Ajax application development

    0
  112. 112

    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
  113. 113

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

    0
  114. 114

    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
  115. 115

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

    0
  116. 116

    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
  117. 117

    Hi Shery,

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

    0

↑ Back to top