Cut & Paste Ajax Tooltip script v1.2
Credit: JavaScript Kit |
Last update (v1.2 July 10th, 08'): Modified tooltip to follow mouse, added Ajax "loading" message.
Description: This Ajax script enhances the default "title
" attribute of HTML so certain tooltips can instead get their contents from an external file, with rich HTML content and all. Integration is easy and non obtrusive, and for the sake of efficiency, the script will only use Ajax to load the tooltip's content the very first time the user rolls over the attached element.
Example:
Try moving your mouse over this link to see an Ajax tooltip shown, with its contents dynamically populated from an external file. Or, try it with the below DIV instead:
Directions:
Step 1: Insert the below into the <head> section of your page:
The code above references two external .js files, plus one image. Download them below:
Step 2: Then to add an ajax tooltip to any element on your page, just use the "title" attribute of HTML as usual, but with the following convention:
<a href="#" title="ajax: external.htm">Some link</a>
where "external.htm
" is to relative path to the external page on your server to populate the tooltip using, always proceeded with the keyword "ajax:
" to tell the script that this is an ajax tooltip. For testing purposes, here is the "external.htm " file (right click, and choose "Save As") you can quickly use to test out the script.