本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。
这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。程序特点1，同一个提示框用在多个触发元素时，只需一个实例；
2，显示和隐藏分别有点击方式和触发方式选择；
3，能设置延时显示和隐藏；
4，有25种预设定位位置；
5，可在预设定位基础上，再自定义定位；
6，可设置自适应窗口定位；详细程序说明和效果预览请看这里完整实例下载
这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。程序特点1，同一个提示框用在多个触发元素时，只需一个实例；
2，显示和隐藏分别有点击方式和触发方式选择；
3，能设置延时显示和隐藏；
4，有25种预设定位位置；
5，可在预设定位基础上，再自定义定位；
6，可设置自适应窗口定位；详细程序说明和效果预览请看这里完整实例下载
首先进行下面设置：Code
this._cssTip.margin = 0;
this._cssTip.position = "absolute";
this._cssTip.visibility = "hidden";
this._cssTip.display = "block";
this._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";其中margin设为0是为了避免一些定位问题，用visibility来隐藏而不是display是因为程序需要获取Tip的offsetWidth、offsetHeight，还需要设置left和top是避免因Tip占位出现的滚动条。
因为Tip可能会在其他定位元素里面，所以还要设两个offset修正参数：Code
var iLeft = iTop = 0, p = this.Tip.offsetParent;
while (!(p === document.body || p === document.documentElement)) {
iLeft += p.offsetLeft; iTop += p.offsetTop; p = p.offsetParent;
};
this._offsetleft = iLeft;
this._offsettop = iTop;最后给Tip的mouseover加一个事件，具体后面再说明。
【触发对象】由于很多情况下都是一个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请参考这里的比较文档位置。
这样得到的是判断是否内部元素，最后取反就是判断是否外部元素了。
【点击方式】点击方式显示是指点击触发元素的时候显示Tip。
在Add程序中会给触发元素的click事件绑定以下程序：Code
addEvent(elem, "click", BindAsEventListener(this, function(e){
if (trigger.ClickShow) {
if (this.CheckShow(trigger)) {
this.ReadyShow(trigger.ClickShowDelay);
} else {
clearTimeout(this._timer);
};
};
}));首先根据ClickShow判断是否进行点击显示，再用CheckShow检测是否同一个触发对象。
CheckShow程序是这样的：if (trigger !== this._trigger) {
this.Hide(); this._trigger = trigger; return true;
} else { return false; };如果不是同一个触发对象，就先执行Hide清理前一个触发对象，防止冲突，再执行ReadyShow来显示。
如果是同一个触发对象，就说明当前是延时隐藏阶段，清除定时器保持显示状态就行了。对应的，点击方式隐藏是指点击外部元素的时候隐藏Tip。
在ReadyShow里，当ClickHide为true时，就会把_fCH绑定到document的click事件里：trigger.ClickHide && addEvent(document, "click", this._fCH);注意这里要把隐藏绑定事件放到ReadyShow，而不是Show里面，因为延时的时候有可能还没有显示就触发了隐藏事件。其中_fCH是在初始化时定义的一个属性，用于添加和移除点击隐藏事件：this._fCH = BindAsEventListener(this, function(e) {
if (this.Check(e.target) && this.CheckHide()) {
this.ReadyHide(this._trigger.ClickHideDelay);
}
});注意不同于点击显示，由于绑定的是document，隐藏前要先确定e.target是不是外部元素。其中CheckHide是作用是检查Tip当前是不是隐藏状态：Code
if (this._cssTip.visibility === "hidden") {
clearTimeout(this._timer);
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
this._trigger = null;
removeEvent(document, "click", this._fCH);
return false;
} else { return true; };如果本来就是隐藏状态，清除定时器移除事件就行，不需要再执行Hide了。
【触发方式】触发方式针对的是mouseover和mouseout，它的流程跟点击方式是差不多的。触发方式显示是指鼠标从外部元素进入触发元素（触发mouseover）的时候显示Tip。
在Add程序中会给触发元素的mouseover事件绑定以下程序：Code
addEvent(elem, "mouseover", BindAsEventListener(this, function(e){
if (trigger.TouchShow) {
if (this.CheckShow(trigger)) {
this.ReadyShow(trigger.TouchShowDelay);
} else if (this.Check(e.relatedTarget)) {
clearTimeout(this._timer);
};
};
}));跟点击方式类似，也需要执行一次CheckShow，但不同的是，还会用Check判断e.relatedTarget是不是外部对象。
这是因为mouseover可能是从触发元素的内部元素（包括Tip）进入或内部元素冒泡触发的，而这些情况不需要任何操作。对应的，触发方式隐藏是指鼠标从触发元素或Tip离开时隐藏Tip。
当TouchHide为true时，在ReadyShow的时候会把_fTH绑定到触发元素的mouseout事件里：trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);在Show的时候，再绑定到Tip的mouseout：trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH);在ReadyShow绑定的原因同上，而Tip只需显示时绑定。其中_fTH跟_fCH类似，也是在初始化时定义的一个属性，用于添加和移除触发隐藏事件：this._fTH = BindAsEventListener(this, function(e) {
if (this.Check(e.relatedTarget) && this.CheckHide()) {
this.ReadyHide(this._trigger.TouchHideDelay);
}
});不同的是mouseout在Check的时候是用e.relatedTarget。
【触发原理】上面是从程序的角度说明了触发显示和隐藏的过程，但要真正理解的话还需要做一次细致的分析。
下面是以触发方式的显示隐藏为例做的流程图：下面是文字说明：
1，等待触发显示；
2，进入触发元素，如果设置延时，跳到3，如果没有设置延时，跳到4；
3，延时时间内，离开到外部元素，清除定时器，返回1，超过延时时间，跳到4；
4，执行显示程序；
5，显示Tip状态；
6，离开触发元素，如果是进入到Tip，跳到7，如果是离开到外部元素，跳到9；
7，保持显示状态；
8，离开Tip，如果是进入触发元素，返回5，如果是离开到外部元素，跳到9；
9，如果设置延时，跳到10，如果没有设置延时，跳到11；
10，延时时间内，如果进入Tip，清除定时器，返回7，如果进入触发元素，清除定时器，返回5，超过延时时间，跳到11；
11，执行隐藏程序，返回1；再对照程序，应该就能理解整个流程了，当然可能还不是那么好理解。
这个流程也只是单例的情况，多例的时候还要多加一些判断。
可以说这个流程看似不难，但如果想做一个最优化的流程，那要考虑的细节地方可能会让人受不了。
点击方式跟触发方式的流程是差不多的，而且更简单，这里就不重复了。
【元素定位】完成了显示隐藏，就到本程序另一个重点，元素定位。
程序包括这几个定位：预设定位，自定义定位，自适应定位。
而定位的最终效果是结合了这几个定位设置的效果，下面再一一分析。
【预设定位和自定义定位】预设定位的意思是使用程序25个预设位置来定位。
25个位置是怎么来的呢？看原文的演示其中黑色框代表触发元素，红色框代表Tip。
一眼望去，要实现这么多的位置好像很复杂，这时要想找到最好的方法就要细心分析找出规律。
这25个位置其实都是由5个水平坐标和5个垂直坐标组合而来的，只要计算好这10个坐标，就能组合出这25个位置来了。
其中1，2，3，4，5代表的水平坐标，程序分别用left，clientleft，center，clientright，right来标识。
而1，6，11，16，21代表的垂直坐标，程序分别用top，clienttop，center，clientbottom，bottom来标识。
ps：词穷，只好加个client来充数。下面说说如何获取这些坐标的值，首先通过getBoundingClientRect要获取触发元素的坐标对象。
ps：关于getBoundingClientRect的介绍请看这里的元素位置。
再利用这个坐标对像，通过GetLeft和GetTop来获取水平和垂直坐标。
GetLeft和GetTop里面都是些简单的获取坐标算法，具体请参考代码。使用时，把水平坐标和垂直坐标的标识值（字符）分别赋给触发对象的Align和vAlign属性，系统就会自动设置对应的位置。
例如要设置位置14，那么Align设为"clientright"，vAlign设为"center"就可以了。至于自定义定位就是在预设定位得到的坐标基础上，根据Custom（形式如{ left: 50, top: -10 }）的设置再进行left和top的修正。
自定义百分比定位是以触发元素的宽和高为基准，取百分比：if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth; };
if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight; };注意数值单位是0.01。
【自适应定位】自适应定位的作用是当Tip显示的范围超过浏览器可视范围的时候，自动修正到可视范围里面。
因为上面通过getBoundingClientRect获取的定位是以视窗为准的，所以可以直接通过clientWidth/clientHeight来判断是否超过视窗范围。
首先获取最大left和top值：var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth,
maxTop = this._doc.clientHeight - this.Tip.offsetHeight;最小值是0就不用计算了。如果Reset属性是true会使用重新定位的方法。
理想的效果是能自动从25个预设定位中找到适合的定位位置。
但这个需求实在变化太多，要全部实现估计要长长的代码，程序仅仅做了简单的修正：Code
if (iLeft > maxLeft || iLeft < 0) {
iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
};
if (iTop > maxTop || iTop < 0) {
iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
};实际应用的话估计要按需求重写这部分才行。如果不是用Reset重新定位，只需要根据这几个值获取适合的值就行了：iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);【隐藏select】又是ie6的隐藏select问题，这里用的是iframe遮盖法。首先初始化时插入iframe： this._iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
document.body.insertBefore(this._iframe, document.body.childNodes[0]);在Show的时候，参照Tip设置好样式，再显示：Code
this._iframe.style.left = iLeft + this._docScroll.scrollLeft + "px";
this._iframe.style.top = iTop + this._docScroll.scrollTop + "px";
this._iframe.style.width = this.Tip.offsetWidth + "px";
this._iframe.style.height = this.Tip.offsetHeight + "px";
this._iframe.style.display = "";其实就是要垫在Tip的下面。在Hidde时隐藏就可以了。
使用说明实例化时，第一个必要参数是Tip对象：var ft = new FixedTips("idTip");第二个可选参数用来设置触发对象属性的统一默认值。然后用Add方法添加触发对象：var trigger1 = ft.Add("idTrigger1");第二个可选参数用来设置该触发对象属性。要添加多个触发对象时只需继续用Add添加就行了。
var FixedTips = function(tip, options){
this.Tip = $$(tip);//提示框
this._trigger = null;//触发对象
this._timer = null;//定时器
this._cssTip = this.Tip.style;//简化代码
this._onshow = false;//记录当前显示状态
this.SetOptions(options);
//处理Tip对象
this._cssTip.margin = 0;//避免定位问题
this._cssTip.position = "absolute";
this._cssTip.visibility = "hidden";
this._cssTip.display = "block";
this._cssTip.zIndex = 99;
this._cssTip.left = this._cssTip.top = "-9999px";//避免占位出现滚动条
//offset修正参数
var iLeft = iTop = 0, p = this.Tip;
while (p.offsetParent) {
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
this._offsettop = iTop;
//移入Tip对象时保持显示状态
addEvent(this.Tip, "mouseover", BindAsEventListener(this, function(e){
//如果是外部元素进入，说明当前是隐藏延时阶段，那么清除定时器取消隐藏
this.Check(e.relatedTarget) && clearTimeout(this._timer);
}));
//ie6处理select
if (isIE6) {
this._iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
document.body.insertBefore(this._iframe, document.body.childNodes[0]);
};
//用于点击方式隐藏
this._fCH = BindAsEventListener(this, function(e) {
if (this.Check(e.target) && this.CheckHide()) {
this.ReadyHide(this._trigger.ClickHideDelay);
};
});
//用于触发方式隐藏
this._fTH = BindAsEventListener(this, function(e) {
if (this.Check(e.relatedTarget) && this.CheckHide()) {
this.ReadyHide(this._trigger.TouchHideDelay);
};
});
};
FixedTips.prototype = {
_doc: document.documentElement,//简化代码
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
ClickShow: true,//是否点击方式显示
ClickShowDelay: false,//是否点击显示延时
ClickHide: true,//是否点击方式隐藏
ClickHideDelay: false,//是否点击隐藏延时
TouchShow: true,//是否触发方式显示
TouchShowDelay: true,//是否触发显示延时
TouchHide: true,//是否触发方式隐藏
TouchHideDelay: true,//是否触发隐藏延时
ShowDelay: 300,//显示延时时间
HideDelay: 300,//隐藏延时时间
Align: "clientleft",//水平方向定位
vAlign: "clienttop",//垂直方向定位
Custom: { left: 0, top: 0 },//自定义定位
Percent: { left: 0, top: 0 },//自定义百分比定位
Adaptive: false,//是否自适应定位
Reset: false,//自适应定位时是否重新定位
onShow: function(){},//显示时执行
onHide: function(){}//隐藏时执行
};
Extend(this.options, options || {});
},
//检查触发元素
Check: function(elem) {
//返回是否外部元素（即触发元素和Tip对象本身及其内部元素以外的元素对象）
return !this._trigger ||
!(
this.Tip === elem || this._trigger.Elem === elem ||
Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem)
);
},
//准备显示
ReadyShow: function(delay) {
clearTimeout(this._timer);
var trigger = this._trigger;
//点击方式隐藏
trigger.ClickHide && addEvent(document, "click", this._fCH);
//触发方式隐藏
trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);
//是否延迟触发
if (delay) {
this._timer = setTimeout(Bind(this, this.Show), trigger.ShowDelay);
} else { this.Show(); };
},
//显示
Show: function() {
clearTimeout(this._timer);
this._trigger.onShow();//放在前面方便修改属性
//根据预设定位和自定义定位计算left和top
var trigger = this._trigger, rect = trigger.Elem.getBoundingClientRect(),
scrolldoc = isChrome || isSafari ? document.body : this._doc,
scrollLeft = scrolldoc.scrollLeft, scrollTop = scrolldoc.scrollTop,
customLeft = trigger.Custom.left, customTop = trigger.Custom.top,
iLeft = this.GetLeft(rect, trigger.Align) + customLeft,
iTop = this.GetTop(rect, trigger.vAlign) + customTop;
//自定义百分比定位
if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth; };
if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight; };
//自适应视窗定位
if (trigger.Adaptive) {
//修正定位参数
var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth,
maxTop = this._doc.clientHeight - this.Tip.offsetHeight;
if (trigger.Reset) {
//自动重新定位
if (iLeft > maxLeft || iLeft < 0) {
iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
};
if (iTop > maxTop || iTop < 0) {
iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
};
} else {
//修正到适合位置
iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);
};
};
//设置位置并显示
this._cssTip.left = iLeft + scrollLeft - this._offsetleft + "px";
this._cssTip.top = iTop + scrollTop - this._offsettop + "px";
this._cssTip.visibility = "visible";
//ie6处理select
if (isIE6) {
this._iframe.style.left = iLeft + scrollLeft + "px";
this._iframe.style.top = iTop + scrollTop + "px";
this._iframe.style.width = this.Tip.offsetWidth + "px";
this._iframe.style.height = this.Tip.offsetHeight + "px";
this._iframe.style.display = "";
};
//触发方式隐藏
trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH);
},
//获取相对触发元素的left
GetLeft: function(rect, align) {
switch (align.toLowerCase()) {
case "left" :
return rect.left - this.Tip.offsetWidth;
case "clientleft" :
return rect.left;
case "center" :
return (rect.left + rect.right - this.Tip.offsetWidth)/2;
case "clientright" :
return rect.right - this.Tip.offsetWidth;
case "right" :
default :
return rect.right;
};
},
//获取相对触发元素的top
GetTop: function(rect, valign) {
switch (valign.toLowerCase()) {
case "top" :
return rect.top - this.Tip.offsetHeight;
case "clienttop" :
return rect.top;
case "center" :
return (rect.top + rect.bottom - this.Tip.offsetHeight)/2;
case "clientbottom" :
return rect.bottom - this.Tip.offsetHeight;
case "bottom" :
default :
return rect.bottom;
};
},
//准备隐藏
ReadyHide: function(delay) {
clearTimeout(this._timer);
if (delay) {
this._timer = setTimeout(Bind(this, this.Hide), this._trigger.HideDelay);
} else { this.Hide(); };
},
//隐藏
Hide: function() {
clearTimeout(this._timer);
//设置隐藏
this._cssTip.visibility = "hidden";
this._cssTip.left = this._cssTip.top = "-9999px";
//ie6处理select
if (isIE6) { this._iframe.style.display = "none"; };
//处理触发对象
if (!!this._trigger) {
this._trigger.onHide();
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
}
this._trigger = null;
//移除事件
removeEvent(this.Tip, "mouseout", this._fTH);
removeEvent(document, "click", this._fCH);
},
//添加触发对象
Add: function(elem, options) {
//创建一个触发对象
var elem = $$(elem), trigger = Extend(Extend({ Elem: elem }, this.options), options || {});
//点击方式显示
addEvent(elem, "click", BindAsEventListener(this, function(e){
if (trigger.ClickShow) {
if (this.CheckShow(trigger)) {
this.ReadyShow(trigger.ClickShowDelay);
} else {
clearTimeout(this._timer);
};
};
}));
//触发方式显示
addEvent(elem, "mouseover", BindAsEventListener(this, function(e){
if (trigger.TouchShow) {
if (this.CheckShow(trigger)) {
this.ReadyShow(trigger.TouchShowDelay);
} else if (this.Check(e.relatedTarget)) {
clearTimeout(this._timer);
};
};
}));
//返回触发对象
return trigger;
},
//显示检查
CheckShow: function(trigger) {
if (trigger !== this._trigger) {
//不是同一个触发对象就先执行Hide防止冲突
this.Hide(); this._trigger = trigger; return true;
} else { return false; };
},
//隐藏检查
CheckHide: function() {
if (this._cssTip.visibility === "hidden") {
//本来就是隐藏状态，不需要再执行Hide
clearTimeout(this._timer);
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
this._trigger = null;
removeEvent(document, "click", this._fCH);
return false;
} else { return true; };
}
};
ding ding
ding ding ding