AJAX Tooltips

[byoriginaldesign]

I had been looking for a thread on how to add AJAX Tooltips, which allows for mouseover jscript popup info, based on a html page you create, and could not find one, so I managed my way through it, and thought I'd post how it was done to save others the trouble.

First I downloaded the script from http://www.dhtmlgoodies.com/index.ht...t=ajax-tooltip

Inside the zip you will need the following: (The demo files aren't anything u need other than to have the demo work and review that code)

• css/ajax-tooltip.css
• images/arrow.gif
• js/ajax.js
• js/ajax-dynamic-content.js
• js/ajax-tooltip.js
• and ajax-tooltip.html is good to review to see how the script works.

Put the js files in includes/template/MY TEMPLATE/jscript folder.
*Obviously replace MY TEMPLATE with whatever template you are using.
Add "jscript_" prior to all the js files you just added (ie jscript_ajax.js) as doing this will automatically add the script to the head tags of the page.

Upload arrow.gif to your images folder.

Open ajax-tooltip.css in a text editor (And I'm sure there is a better way to do this, but what I did...)
Copy everything in the CSS code past
/* CSS needed for the script */
and paste it to the end of your stylesheet.css
(includes/template/MY TEMPLATE/css/stylesheet.css)
You may want to add something along the lines of /* for AJAX Tootip */ between old and new stuff, so down the line you'll know what you added and where.
In that CSS you'll see a reference to the arrow.gif, so you can direct that to your images folder you saved it to, or follow the instructions there to forget about the arrow.

OK, now's a good time to put a quick html page together. For example purposes, well use example.html.

If you looked at the ajax-tooltip.html yet, you would notice they used:
<a href="#" onmouseover="ajax_showTooltip(window.event,'demo-pages/js-calendar.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a> as their code to pull the html file...

For me that didn't work, and I only got the message "loading content, please wait." but by putting the link in and using a blank page it worked out fine.

So my code was:
<a href="http://www.mysite.com/example.html" target="_blank" onmouseover="ajax_showTooltip(window.event,'http://www.mysite.com/example.html',this);return false" onmouseout="ajax_hideTooltip()">Your Highlighted Word</a>

This worked out fine for me, though does open the page in a new window if clicked on, which wasn't an issue for me. Just tinker with your CSS sizes and whatnot and you should be good to go.

Well, hope that helped someone, and feel free to add to this, as I'm sure there are better ways to do some things.

And on a side note, personally I added this to attribute option names after changing the length on the server, and it did cause a few issues with the price updater mod, so it is possible this app may conflict with others you are using.

[ljdream00]

Thanks so much...
I'm going to try this....

[gl3ny]

Thanks for sharing it was a great help. I changed the link to this to stop it opening a new page when clicked on.

<a href="#" onclick="return false" onmouseover="ajax_showTooltip(window.event,'location/of/file.html',this);return false" onmouseout="ajax_hideTooltip()"> Your Highlighted Word </a>