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 01:01PM, 2011/02/20.
Admin comment
DHTMLGoodies
Hi

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

I 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 04:18AM, 2011/02/21.
wim
DHTMLGoodies wrote: #
Hi

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

I 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 04: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 02: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 04: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 05:19AM, 2011/03/15.
sunil
Hi,
thx for the comment.
it's working.
Thx a lot
sunil at 03: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 04:33AM, 2011/03/23.
Salman
Yeah, having the same problem. The script does not work with IE9.
Salman at 08:41AM, 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 04:06AM, 2011/03/28.
Salman
No, there are no error messages at all.
Salman at 03:06PM, 2011/03/31.
daniel
Hi,

There are no border and background-color in IE9.

Thx a lot.

Daniel
daniel at 09:51PM, 2011/04/10.
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 04:30PM, 2011/04/22.
rio
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
rio at 08:23PM, 2011/05/02.
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 08:00AM, 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 08:15AM, 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?

Regards
Keith


Brad at 06:10PM, 2011/06/05.
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 03: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?

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


<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 09:52PM, 2011/08/01.
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
Change
ajax_tooltipObj_iframe = document.createElement('<iframe frameborder="0">');

TO
ajax_tooltipObj_iframe = document.createElement('IFRAME');

on AJAX-TOOLTIP.JS
Rafael Barrelo Oliveira at 08:34AM, 2011/08/04.
Donglee
<a href="#comment22">DHTMLGoodies wrote:</a>
Hi

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

I 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 12: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 04: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 07:45AM, 2012/01/25.
Kressly
Hi

The 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 02: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 03: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 03: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 03: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 06:35PM, 2012/05/06.
flip
thank you!
flip at 04: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 08:44AM, 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 05: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 01:37PM, 2012/08/28.
rajesh
<a href="#comment1093">Donglee wrote:</a>
<a href="#comment22">DHTMLGoodies wrote:</a>
Hi

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

I 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 04:54AM, 2012/09/04.
martin
Thank you so very much!!!
martin at 09:31AM, 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 with
ajax_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 adding
var 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 12:14PM, 2013/04/04.

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 - 2014 dhtmlgoodies.com