New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download Ajax tooltip

Demo

Bookmark and Share

Licensing

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

Configuration

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.

Comments

Wim
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
DHTMLGoodies
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" "http://www.w3.org/TR/html4/loose.dtd">or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DHTMLGoodies at 11:18AM, 2011/02/21.
wim
DHTMLGoodies wrote: #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" "http://www.w3.org/TR/html4/loose.dtd">or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Hi,thx for the comment.On firts issue...realized that later too.On the one with positioning. Gonna try that.Thx a lot.Wim
wim at 11:49AM, 2011/02/21.
Keith
Hi,

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?

Regards
Keith
Keith at 09:02AM, 2011/03/03.
sunil
using this
onmouseout="ajax_hideTooltip()

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: 'ajax_tooltipObj.style' is null or not an object
Line: 117
Char: 2
Code: 0
URI: http://208.109.91.116/union/scripts/ajax-tooltip.js
sunil at 10:09AM, 2011/03/15.
Admin comment
DHTMLGoodies
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)ajax_tooltipObj.style.display='none';}
DHTMLGoodies at 11:19AM, 2011/03/15.
sunil
Hi,thx for the comment.it's working.Thx a lot
sunil at 09:01AM, 2011/03/21.
Steve
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.
Salman
Yeah, having the same problem. The script does not work with IE9.
Salman at 02:41PM, 2011/03/27.
Admin comment
DHTMLGoodies
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.
Salman
No, there are no error messages at all.
Salman at 09:06PM, 2011/03/31.
daniel
Hi,There are no border and background-color in IE9.Thx a lot.Daniel
daniel at 03:51AM, 2011/04/11.
ad
Keith wrote:Hi,

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?

Regards
Keith
ad at 10:30PM, 2011/04/22.
rio
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.
sam
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.
Jeff
Hello,

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?

Regards,

Jeff
Jeff at 02:15PM, 2011/06/03.
Brad
I'd also like to know if this is possible..
Keith wrote:Hi,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?RegardsKeith
Brad at 12:10AM, 2011/06/06.
Deep
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.
Deep
<a href="#comment595">Brad wrote:</a>I'd also like to know if this is possible..
<a href="#comment78">Keith wrote:</a>Hi,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?RegardsKeith
<a href="#comment78">Keith wrote:</a>Hi,

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?

Regards
Keith
<a href="#comment78">Keith wrote:</a>Hi,

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?

Regards
Keith
<a href="#comment78">Keith wrote:</a>Hi,

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?

Regards
Keith
Deep at 03:52AM, 2011/08/02.
Rafael Barrelo Oliveira
<a href="#comment203">Steve wrote:</a>Hi!This script doesn't work with IE9.. Can't figure out why, do you guys have any idea ?/Steve
<a href="#comment234">Salman wrote:</a>Yeah, having the same problem. The script does not work with IE9.
For IE9 Changeajax_tooltipObj_iframe = document.createElement('<iframe frameborder="0">');TOajax_tooltipObj_iframe = document.createElement('IFRAME');on AJAX-TOOLTIP.JS
Rafael Barrelo Oliveira at 02:34PM, 2011/08/04.
Donglee
<a href="#comment22">DHTMLGoodies wrote:</a>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" "http://www.w3.org/TR/html4/loose.dtd">or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Donglee at 07:59AM, 2011/11/09.
darkscout
<a href="#comment438">rio wrote:</a>
hi
is 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


Remove the "position:absolute;" from "#ajax_tooltipObj .ajax_tooltip_content" in the ajax-tooltip.css.

That fixed it for me
darkscout at 11:46AM, 2012/01/25.
Yvonne
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: http://www.mxcc.commnet.edu/ajax-tooltip/ajax-tooltip.html#Thanks!
Yvonne at 02:45PM, 2012/01/25.
Kressly
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.
Abhishek
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 http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html 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.
Abhishek
<a href="#comment237">DHTMLGoodies wrote:</a>Do you see any error-messages in IE 9? (Double click on the warning sign on the status bar).
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 http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html 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:16AM, 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.
Vicki
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.
flip
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.
Sambhaji
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.
rajesh
<a href="#comment1093">Donglee wrote:</a>
<a href="#comment22">DHTMLGoodies wrote:</a>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" "http://www.w3.org/TR/html4/loose.dtd">or<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<a href="#comment1925">Wayne Brown wrote:</a>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.
<a href="#comment2177">Sambhaji wrote:</a>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.
rajesh at 10:54AM, 2012/09/04.
martin
Thank you so very much!!!
martin at 04:31PM, 2013/01/18.
David
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 withajax_tooltipObj.style.left = (leftPos + x_offset_tooltip) + 'px';ajax_tooltipObj.style.top = (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.
Suriya
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.
cliff
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.

Thanks
cliff at 12:35AM, 2017/03/14.
Admin comment
DHTMLGoodies
Cliff,

Do you want "cat" to be a variable?

perhaps you can set the url like so:

var catVariable = "cat";
var url = "ajax.php?var=" + catVariable;

Then you can update the catVariable to whatever you want it to be.


DHTMLGoodies at 03:08PM, 2017/03/17.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com