这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。
程序特点
1，同一个提示框用在多个触发元素时，只需一个实例；
2，显示和隐藏分别有点击方式和触发方式选择；
3，能设置延时显示和隐藏；
4，有25种预设定位位置；
5，可在预设定位基础上，再自定义定位；
6，可设置自适应窗口定位；
程序说明
【Tip对象】
Tip对象就是用来显示提示信息的容器，程序用Tip属性表示。这个没什么要求，程序初始化时会对它进行一些设置。
首先进行下面设置：
复制代码 代码如下:
var css = this._cssTip;
css.margin = 0;
css.position = "absolute"; css.visibility = "hidden";
css.display = "block"; css.zIndex = 99;
css.left = this._cssTip.top = "-9999px";
其中margin设为0是为了避免一些定位问题，用visibility来隐藏而不是display是因为程序需要获取Tip的offsetWidth、offsetHeight，还需要设置left和top是避免因Tip占位出现的滚动条。
因为Tip可能会在其他定位元素里面，所以还要设两个offset修正参数：
复制代码 代码如下:
var iLeft = 0, iTop = 0, p = this.Tip;
while (p.offsetParent) {
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
this._offsettop = iTop;
最后给Tip的mouseover加一个事件，具体后面再说明。
【触发对象】
由于很多情况下都是一个Tip对应多个地方的提示，所以程序参考了Table排序的方式，添加了一个Add方法。
一个Tip实例化后，再用Add方法就可以对多个触发元素分别添加触发对象，程序中用_trigger属性表示当前的触发对象。
Add方法的一个必要参数是触发元素，就是触发显示Tip的元素。
需要的话还可以用options参数，来自定义触发对象的属性，包括：
属性: 默认值//说明
复制代码 代码如下:
ShowType: "both",//显示方式
HideType: "both",//隐藏方式
ShowDelayType: "touch",//显示延迟方式
HideDelayType: "touch",//隐藏延迟方式
ShowDelay: 300,//显示延时时间
HideDelay: 300,//隐藏延时时间
Fixed: {},//定位对象
onShow: function(){},//显示时执行
onHide: function(){}//隐藏时执行
具体作用后面再说明，可以在程序初始化时修改这些默认值。
一个经典应用是在onShow中把Tip修改为各个触发对象对应的内容。
此外还有Elem属性保存触发元素。
【显示和隐藏】
提示效果的一个重点就是显示和隐藏提示信息。程序是通过设置Tip的visibility是否hidden来显示和隐藏Tip的。
具体的显示和隐藏程序分别在Show和Hide程序中，还有ReadyShow和ReadyHide程序，主要用来处理延时。
这种提示效果的一个特点是鼠标移动到Tip上时，会保持显示状态。
为了实现这个效果，给Tip的mouseover写入程序：
this.Check(e.relatedTarget) && clearTimeout(this._timer);
其中Check程序是用来判断relatedTarget是不外部元素，即鼠标离开的元素是不是外部元素。
如果是外部元素，就说明当前是隐藏延时阶段，那么只要清除定时器来取消隐藏就可以了。
这里的外部元素是指触发元素和Tip对象本身及其内部元素以外的元素。
这个有点拗口，那再看看Check程序是怎么判断的就明白了：
复制代码 代码如下:
return !this._trigger ||
!(
this.Tip === elem || this._trigger.Elem === elem ||
Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem)
);
首先判断_trigger是否存在，不存在的话说明是刚开始触发，也看成是外部触发。
存在的话再判断传递过来的元素是不是Tip或触发元素本身，最后再用Contains判断判断是不是在Tip或触发元素内部。
ps：关于Contains请参考这里的比较文档位置。
这样得到的是判断是否内部元素，最后取反就是判断是否外部元素了。
【点击方式】
点击方式显示是指点击触发元素的时候显示Tip。
在Add程序中会给触发元素的click事件绑定以下程序：
复制代码 代码如下:
addEvent(elem, "click", BindAsEventListener(this, function(e){
if ( this.IsClick(trigger.ShowType) ) {
if ( this.CheckShow(trigger) ) {
this.ReadyShow(this.IsClick(trigger.ShowDelayType));
} else {
clearTimeout(this._timer);
};
};
}));
首先根据ClickShow判断是否进行点击显示，再用CheckShow检测是否同一个触发对象。
CheckShow程序是这样的：
复制代码 代码如下: