- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- Tooltips
- AJAX scripts
- Content Effects
- Misc scripts
- Javascript games
- Chess widgets
- DHTML Suite
- Resources
- cbolson.com
Download Ajax tooltip
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
Post your comment
Please wait...
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
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
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
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
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';
}
thx for the comment.
it's working.
Thx a lot
This script doesn't work with IE9.. Can't figure out why, do you guys have any idea ?
/Steve
There are no border and background-color in IE9.
Thx a lot.
Daniel
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
thanks!
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
For IE9
Change
ajax_tooltipObj_iframe = document.createElement('<iframe frameborder="0">');
TO
ajax_tooltipObj_iframe = document.createElement('IFRAME');
on AJAX-TOOLTIP.JS
Remove the "position:absolute;" from "#ajax_tooltipObj .ajax_tooltip_content" in the ajax-tooltip.css.
That fixed it for me
Thanks!
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
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
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
Thanks.
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
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.
I have a question:
I want to use tool tip on tool tip . any ideas ??????????????????????/
Do you have any idea why its not showing the page content? I'm using IE8.
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.