触发对象：

由于很多情况下都是一个Tip对应多个地方的提示，所以程序参考了 Table排序 的方式，添加了一个Add方法。
一个Tip实例化后，再用Add方法就可以对多个触发元素分别添加触发对象，程序中用_trigger属性表示当前的触发对象。
Add方法的一个必要参数是触发元素，就是触发显示Tip的元素。
需要的话还可以用options参数，来自定义触发对象的属性，包括：

属性:  默认值//说明
ClickShow:  true,//是否点击方式显示
ClickShowDelay: false,//是否点击显示延时
ClickHide:  true,//是否点击方式隐藏
ClickHideDelay: false,//是否点击隐藏延时
TouchShow:  true,//是否触发方式显示
TouchShowDelay: true,//是否触发显示延时
TouchHide:  true,//是否触发方式隐藏
TouchHideDelay: true,//是否触发隐藏延时
ShowDelay:  300,//显示延时时间
HideDelay:  300,//隐藏延时时间
vAlign:  "clienttop",//垂直方向定位
Align:  "left",//水平方向定位
Custom:  { left: 0, top: 0 },//自定义定位
Percent:  { left: 0, top: 0 },//自定义百分比定位
Adaptive:  true,//是否自适应定位
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请参考这里的比较文档位置。
这样得到的是判断是否内部元素，最后取反就是判断是否外部元素了。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript 浮动定位提示效果 [1] 下一页 JavaScript 浮动定位提示效果 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。