JavaScript 自定义 Tooltip 提示框源码解析与实现

自定义 Tooltip 提示框实现思路

虽然图片标签 img 自带的 alt 属性能提供基础提示，但原生效果较为单一。为了提升用户体验，开发者常利用 JavaScript 实现更美观的提示框效果，这种交互常见于 Web 游戏及大型网站（如网易邮箱、迅雷影视）。尽管不同站点的具体视觉风格存在差异，其核心实现逻辑是一致的。为了便于开发者理解细节并进行个性化定制，本文选取了一段带有详细注释的优质源码进行解析。

以下是包含详细注释的代码示例：

 
/*********************************************** 
JavaScript 自定义 Tooltip 提示框源码解析
代码注释作者：唐国辉
作者博客地址：http://webflash.cnblogs.com
***********************************************/ 
// 封装 getElementById 方法，提供快捷访问方式
function $(obj)
{ 
if(typeof(obj)=='object')
{ 
return obj;
} 
else
{ 
return document.getElementById(obj);
} 
} 
// 封装 document.write 方法，简化 DOM 创建过程
function $P(str)
{ 
document.write(str);
} 
// 屏蔽脚本运行时的错误提示
window.onerror=function ()
{ 
return true;
}; 
/* 
// 定义全局变量说明
pltsPop：存储提示内容文本（源自元素的 alt 或 title 属性，不含 HTML 标签）
toolTip：指向提示内容主体的 DOM 对象（即后续定义的 content 变量）
pltsPoptop：指向提示框上方标题区域的 DOM 对象
pltsPopbot：指向提示框下方标题区域的 DOM 对象
topLeft：指向左上角方向箭头标题的 DOM 对象
botLeft：指向左下角方向箭头标题的 DOM 对象
topRight：指向右上角方向箭头标题的 DOM 对象
botRight：指向右下角方向箭头标题的 DOM 对象
*/ 
var pltsPop,toolTip,pltsPoptop,pltsPopbot,topLeft,botLeft,topRight,botRight;
// 设置提示窗口相对于触发对象的偏移量
var pltsoffsetX=10;
var pltsoffsetY=15;
var pltsTitle="";
// 创建一个绝对定位且初始隐藏的图层容器
$P('<div id=\"pltsTipLayer\" style="display:none; position:absolute; z-index:10001" mce_style="display:none; position:absolute; z-index:10001"></div>');
// 将刚创建的层对象引用赋值给变量，此步骤必须在层创建语句之后执行
var pltsTipLayer=$('pltsTipLayer');
核心源码逻辑解析// 定义鼠标移入对象时的处理函数，主要功能是提取 alt 或 title 属性值，并初始化提示框的 HTML 结构与样式
function PltsMouseOver(ev)
{ 
// 兼容不同浏览器的事件对象获取机制
var Event=window.event||ev;
var o=Event.srcElement||Event.target;
// 若对象存在非空的 alt 属性，将其值存入自定义属性 dypop，并清空原 alt 以禁用浏览器默认提示
if(o.alt!=null&&o.alt!="")
{ 
o.dypop=o.alt;
o.alt="";
} 
// 对具有 title 属性的对象执行相同逻辑，清空 title 属性以禁用默认提示效果
if(o.title!=null&&o.title!="")
{ 
o.dypop=o.title;
o.title="";
} 
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{ 
// 将上述创建的提示层显示出来，但暂时将其移至屏幕左侧极远处（用户不可见）
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
/* 
// 格式化提示信息，将换行符 \n 替换为 <br/> 标签。例如，若 title 定义为 'Author:Tom\nSex:male'，则显示时‘作者’和‘性别’将分两行展示
<div title="Author:Tom
Sex:male">Article title...</div>
*/ 
var Msg=pltsPop.replace(/\n/g,"<br/>");
Msg=Msg.replace(/\0x13/g,"<br/>");
// 使用正则表达式检查提示内容是否包含类似 '{提示标题}' 的格式。注意 {} 内的内容需排除。若未找到，则默认使用“简介”作为标题
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))
{ 
pltsTitle="<label style=\"color:#000\">简介</label>";
} 
else
{ 
re=/\{(.[^\{]*)\}(.*)/ig;
// 提取 {} 括号内的内容作为标题
pltsTitle=Msg.replace(re,"$1")+" ";
// 将 {内容} 及其括号从正文中移除，得到最终的提示正文内容
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
} 
// 定义提示框的 HTML 结构与样式，并将获取到的相关数据填充到对应变量中
var content="<dl id=\"toolTip\" style=\"-moz-opacity:0.85;opacity:0.85;FILTER:alpha(opacity=85);padding:2px;background:#fff;\"><dd id=\"pltsPoptop\" class=\"toolTipTitle\" style=\"line-height:20px;\"><p id=\"topLeft\" class=\"left\"><b><label style=\"color:#ffffff\">↖</label>"+pltsTitle+"</b></p><p id=\"topRight\" class=\"right\" style=\"display:none\"><b>"+pltsTitle+"<label style=\"color:#ffffff\">↗</label ></b></p></dd><dd class=\"toolTipMsg\">"+Msg+"</dd><dd id=\"pltsPopbot\" style=\"display:none\" class=\"toolTipTitle\"><p id=\"botLeft\" class=\"left\"><b><label style=\"color:#ffffff\">↙</label >"+pltsTitle+"</b></p><p id=\"botRight\" class=\"right\" style=\"display:none\"><b>"+pltsTitle+"<label style=\"color:#ffffff\">↘</label></b></p></dd></dl>";
pltsTipLayer.innerHTML=content;
toolTip=$("toolTip");
pltsPoptop=$("pltsPoptop");
pltsPopbot=$("pltsPopbot");
topLeft=$("topLeft");
botLeft=$("botLeft");
topRight=$("topRight");
botRight=$("botRight");
// 设置提示框宽度：取提示框自身宽度与浏览器可见窗口宽度一半的最小值。当浏览器窗口小于提示框原始宽度时，自动调整提示框宽度
toolTip.style.width=Math.min(pltsTipLayer.clientWidth,document.documentElement.clientWidth/2.2)+"px";
} 
else
{ 
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
} 
} 
// 定义鼠标在对象上移动时的处理函数，鼠标每移动一像素即触发一次事件
function PltsMouseMove(ev)
{ 
if(pltsTipLayer.innerHTML=='')
return true;
var Event=window.event||ev;
// 获取鼠标当前的 X、Y 坐标
var MouseX=Event.clientX;
var MouseY=Event.clientY;
// 获取提示框的宽度和高度
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
// 判断当前光标 Y 坐标加上提示框 Y 轴偏移量及提示框高度是否超过窗口可见高度。这种情况通常发生在页面下方（如页脚链接）需要提示时。若超出，则使用下方标题区域
if(MouseY+pltsoffsetY+popHeight>document.documentElement.clientHeight)
{ 
// 当提示框显示在触发对象上方时，需要额外计算 popTopAdjust 值作为最终定位依据
popTopAdjust=-popHeight-pltsoffsetY*1.5;
pltsPoptop.style.display="none";
pltsPopbot.style.display="";
} 
else
{ 
popTopAdjust=0;
pltsPoptop.style.display="";
pltsPopbot.style.display="none";
} 
// 判断使用左侧标题还是右侧标题
if(MouseX+pltsoffsetX+popWidth>document.documentElement.clientWidth)
{ 
popLeftAdjust=-popWidth-pltsoffsetX*2;
topLeft.style.display="none";
botLeft.style.display="none";
// 下方两个标题均显示，但最终仅看到一个位置的标题。这是因为 topRight 是 pltsPoptop 的子元素，若父元素不显示，子元素即使显示也无法可见；botLeft 同理
topRight.style.display="";
botRight.style.display="";
} 
else
{ 
popLeftAdjust=0;
topLeft.style.display="";
botLeft.style.display="";
topRight.style.display="none";
botRight.style.display="none";
} 
// 将综合处理得到的提示框最终位置值应用到对象。注意 style.top/left 是相对于整个文档的，因此需加上页面滚动隐藏的高度（scrollTop/scrollLeft）
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.documentElement.scrollLeft+popLeftAdjust+"px";
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.documentElement.scrollTop+popTopAdjust+"px";
return true;
} 
// 定义事件绑定函数
function PltsInit()
{ 
document.onmouseover=PltsMouseOver;
document.onmousemove=PltsMouseMove;
} 
// 调用事件绑定函数以激活功能
PltsInit();

代码调用与使用方法

调用方法：将上述代码保存为独立的外部 JS 文件，并在网页中引入该文件。最后，为需要提示的元素添加 title 属性，图片可添加 alt 属性。示例：<a href="#" title="{完整标题}完整标题文字">缩写标题</a> 或 <img src="#" alt="图片提示" />

相关链接： 1、http://www.cnblogs.com/czh-liyu/archive/2007/12/30/1021146.html 2、http://boxover.swazz.org 3、http://blog.csdn.net/lanmao100/archive/2008/10/31/3191767.aspx