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:
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <style type="text/css"> .ajaxtooltip{ position: absolute; /*leave this alone*/ display: none; /*leave this alone*/ width: 300px; left: 0; /*leave this alone*/ top: 0; /*leave this alone*/ background: lightyellow; border: 2px solid gray; border-width: 1px 2px 2px 1px; padding: 5px; } </style> <script type="text/javascript" src="ajaxtooltip.js"> /*********************************************** * Ajax Tooltip script- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script>
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.
扫一扫
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
