Download Ajax tooltip


Bookmark and Share


This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download script

You can download the entire script from this Zip file

Files included in the package:

  • ajax-tooltip.html = Main HTML file
  • js/ajax-tooltip.js = Main JS file for the script>
  • js/ajax.js = Ajax (SACK library)
  • js/ajax-dynamic-content.js = The dynamic content script from this site
  • css/ajax-tooltip.css = CSS for tooltip
  • css/ajax-tooltip-demo.css = CSS for the demo
  • images/arrow.gif = Arrow used in the tooltip
  • demo-pages = External files loaded by the tooltip


First, you need to include the js files and css files as in the demo(ajax-tooltip.html)

The tooltip is called by a mouseover event applied to an <A> tag. Example:

<a href="#" onmouseover="ajax_showTooltip('demo-pages/ajax-tooltip.html',this);return false" onmouseout="ajax_hideTooltip()">

The layout(size, colors and arrow) is defined in the CSS.


Hi,very nice tooltip.I do have one or two questions.I'm currently testing the tooltip at my testsite. It looks good and works fine.However, the close button is placed outsite my tooltip area.Did anyone faced that same issue and could you pleace tell (guide) me what you did?This brings me to the next question.I cannot seem to get "inside" the tooltip (and use the close button). When I have a tip that exceeds the content of the predefined area, a scrollbar is automatically added. Nice too. But how can I get into the area and use the scroll-bars and close button. Because when I "mouse out", the tooltip close automatically.Is the a way to get inside the tooltip area and prevent it from closing?thx.Wim
Wim at 08:01PM, 2011/02/20.
Admin comment
HiYou can remove onmouseout="ajax_hideTooltip()"from the links if you only want to use the manual "close" button.I'm not sure what's causing the positioning problem, but it may be related to invalid or missing doctype at the top of your html fileI will recommend that you try one of the doctypes below (on line 1 of your html file)<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.0 Transitional// EN" "">or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
DHTMLGoodies at 11:18AM, 2011/02/21.

I'm using your tooltip tool and its great, though I'd like to know how the tip can be placed dynamically based on the position of the content. for example the tip is always displayed to the right, but what if the tip is not readable, so it should be displayed to the left and the same if the tip is displayed at the bottom of the page, again not readable and hence display it above the content?

I tried changing the offset values in the ajax-tooltip.js script, but that doesn't work, as the variable don't seem to be used at all.

so how to change the position, based on the above?

Keith at 09:02AM, 2011/03/03.
using this

IE8 show error on onmouseout="ajax_hideTooltip

ERROR like this

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322; InfoPath.3)
Timestamp: Tue, 15 Mar 2011 10:08:54 UTC

Message: '' is null or not an object
Line: 117
Char: 2
Code: 0
sunil at 10:09AM, 2011/03/15.
Admin comment
Sunil,I'm not sure what's happening there, but you could try to modify ajax_hideTooltip inside ajax-tooltip.js to this:function ajax_hideTooltip(){ if(ajax_tooltipObj)'none';}
DHTMLGoodies at 11:19AM, 2011/03/15.
Hi,thx for the's working.Thx a lot
sunil at 09:01AM, 2011/03/21.
Hi!This script doesn't work with IE9.. Can't figure out why, do you guys have any idea ?/Steve
Steve at 10:33AM, 2011/03/23.
Yeah, having the same problem. The script does not work with IE9.
Salman at 02:41PM, 2011/03/27.
Admin comment
Do you see any error-messages in IE 9? (Double click on the warning sign on the status bar).
DHTMLGoodies at 10:06AM, 2011/03/28.
No, there are no error messages at all.
Salman at 09:06PM, 2011/03/31.
Hi,There are no border and background-color in IE9.Thx a lot.Daniel
daniel at 03:51AM, 2011/04/11.
hiis it possible to remove the close button completely?also i got the problem with positioning for the close button although i have tried the doctype solution?any clue?Thank you
rio at 02:23AM, 2011/05/03.
can we set it such that if the mouseover is on the tooltip, it does not disappear? and that on mouseout, the tooltip remains there for a second or 2 more??thanks!
sam at 02:00PM, 2011/06/01.

I am testing you tooltip and it seems to be exactly what I am looking for, except for one small issue. I have a list of categories and when you mouse over the name it displays the totals (total.php?id=$id) for each one. The problem is that if you drag the mouse over several of them, then stop on one, the totals keep updating the ones you dragged across until it gets to the one you stopped on. Is there a way to delay reading the link until your mouse is stopped for a couple of seconds?


Jeff at 02:15PM, 2011/06/03.
I want to have tooltipes of different sizes (length and width) on single page. As size is defined in css, how to get different size in single html page?
Deep at 09:03AM, 2011/07/27.
Hi I love the tooltips and am trying to implement it on my site but I'm having a small problem. I'm trying to call specific sections from an .xml file but I can't get it to only return parts, it loads the whole file! Any suggestions for how to fix this? I'm sure it's something simple but I can't figure it out. Here's the example so you can see what I mean:!
Yvonne at 02:45PM, 2012/01/25.
HiThe demo script does not work with me in Chrome and IE.And in Safari and Firefox and opera it will only write loading. But nothing happens
Kressly at 09:50AM, 2012/01/30.
Hi, I am using this tool tip for a company, and would like to know some more abut this. I have few questions? Please answer me those, its very important for me.1: But can easily be set to disappear less quickly? How, please explain or suggest best.2: Is the code using AJAX to retrieve the HTML content inside the tooltip. It cannot be preloaded on the page.if not, can we make this way?Please let me know this sir and email me the solution, if possible.Thanks,Abhishek Prakash
Abhishek at 10:14AM, 2012/02/06.
Muhammad Awais
Hi,I am using this tooltip in my project. It works fine in other browsers but not working in IE 9. Any solution?Thanks.
Muhammad Awais at 09:41AM, 2012/04/22.
very nice tooltip.I enjoyed it.I have a question:when my mouse pointer hovers over the info, the poppup window supposedly should display the content instantly, however in my case, the information always shows "loading content please wait" I've waited for ages and nothing shows up.Does anyone know what's happening here...possibly any solutions to this?Your support will be much appreciated.Thanks
Vicki at 12:35AM, 2012/05/07.
thank you!
flip at 10:07AM, 2012/05/23.
Wayne Brown
This is not working in IE 9, even after making the change to the tooltip file. When trying to load an external page, the error I get in IE is the following (and it pertains to the URL property):Object doesn't support property or method 'indexOf'I also noticed that the URL information pulled in references my current page and not the page that I want to load in the tooltip.
Wayne Brown at 02:44PM, 2012/07/20.
I have a question:
Hello I have a question: I want to use tool tip on tool tip . any ideas ??????????????????????/
I have a question: at 11:07AM, 2012/08/08.
The html page content does not show up in the tooltip. I only see the text - loading content please wait..

Do you have any idea why its not showing the page content? I'm using IE8.
Sambhaji at 07:37PM, 2012/08/28.
Thank you so very much!!!
martin at 04:31PM, 2013/01/18.
Hello,a few things i've noticed:1. To make the offset working replace line 114 + 115 in function ajax_positionTooltip(e,inputObj) in ajax-tooltip.js = (leftPos + x_offset_tooltip) + 'px'; = (topPos + y_offset_tooltip) + 'px';2. The example in Configuration above is missing the first argument. It should be:ajax_showTooltip(window.event, 'demo-pages/ajax-tooltip.html',this)3. The cache does not work correct with query-strings. I've fixed that by addingvar origurl = url;after line 76 in ajax-dynamic-content.js(after dynamicContent_ajaxObjects[ajaxIndex] = new sack();)and changing param 'url' to 'origurl' in line 95(...ajax_showContent(divId,ajaxIndex,origurl,callbackOnComplete)...)And if the content is not loading, remember that Ajax is not loading content from outside the domain.
David at 06:14PM, 2013/04/04.
We have downloaded the source code zip file and tried the demo in IE9. But the tooltip is not loading near the info text instead it was loading at the bottom of the page. But it was working fine in IE8.
Suriya at 12:36PM, 2016/12/15.
I'm using jquery ui datagrid, and tooltipster to show a tooltip. Everything works as I would expect it to when I hard code the ajax.php?var=01.1 parm. However, I would like to define the parm as a variable, eg. ajax.php?var=cat. I've tried other tooltip libraries, with the same result. I don't know if asking for help here is appropriate, so if it is too much trouble, please ignore. If you can help, I very much appreciate it.

cliff at 12:35AM, 2017/03/14.
I have used this tooltip and i have scroll down script of a webpage portion so when i am scrolling down then tooltip showing out of the page like at the end of the page. is there any solution that if i go scroll down then tooltip should show in front of that specific record not at the end of the page. Waiting for any solution. Thanks in advance
Nauman at 06:10AM, 2019/03/06.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2023