论坛首页 → Web前端技术论坛 →

jQuery Tooltip插件

浏览 4088 次
锁定老帖子 主题：jQuery Tooltip插件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • paskaa
  • 等级: 二星会员
  • 性别:
  • 文章: 118
  • 积分: 190
  • 来自: 上海
   发表时间：2008-12-08  

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:

I am a DIV with an ajax tooltip added! Roll your mouse over here.

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.
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics