這個效果本身難度不大，主要在程序結(jié)構(gòu)和擴展中下了些功夫，務(wù)求用起來更方便，能用在更多的地方。
程序特點
1，同一個提示框用在多個觸發(fā)元素時，只需一個實例；
2，顯示和隱藏分別有點擊方式和觸發(fā)方式選擇；
3，能設(shè)置延時顯示和隱藏；
4，有25種預(yù)設(shè)定位位置；
5，可在預(yù)設(shè)定位基礎(chǔ)上，再自定義定位；
6，可設(shè)置自適應(yīng)窗口定位；
程序說明
【Tip對象】
Tip對象就是用來顯示提示信息的容器，程序用Tip屬性表示。這個沒什么要求，程序初始化時會對它進行一些設(shè)置。
首先進行下面設(shè)置：

其中margin設(shè)為0是為了避免一些定位問題，用visibility來隱藏而不是display是因為程序需要獲取Tip的offsetWidth、offsetHeight，還需要設(shè)置left和top是避免因Tip占位出現(xiàn)的滾動條。
因為Tip可能會在其他定位元素里面，所以還要設(shè)兩個offset修正參數(shù)：

最后給Tip的mouseover加一個事件，具體后面再說明。
【觸發(fā)對象】
由于很多情況下都是一個Tip對應(yīng)多個地方的提示，所以程序參考了Table排序的方式，添加了一個Add方法。
一個Tip實例化后，再用Add方法就可以對多個觸發(fā)元素分別添加觸發(fā)對象，程序中用_trigger屬性表示當前的觸發(fā)對象。
Add方法的一個必要參數(shù)是觸發(fā)元素，就是觸發(fā)顯示Tip的元素。
需要的話還可以用options參數(shù)，來自定義觸發(fā)對象的屬性，包括：
屬性: 默認值//說明

具體作用后面再說明，可以在程序初始化時修改這些默認值。
一個經(jīng)典應(yīng)用是在onShow中把Tip修改為各個觸發(fā)對象對應(yīng)的內(nèi)容。
此外還有Elem屬性保存觸發(fā)元素。
【顯示和隱藏】
提示效果的一個重點就是顯示和隱藏提示信息。程序是通過設(shè)置Tip的visibility是否hidden來顯示和隱藏Tip的。
具體的顯示和隱藏程序分別在Show和Hide程序中，還有ReadyShow和ReadyHide程序，主要用來處理延時。
這種提示效果的一個特點是鼠標移動到Tip上時，會保持顯示狀態(tài)。
為了實現(xiàn)這個效果，給Tip的mouseover寫入程序：
this.Check(e.relatedTarget) && clearTimeout(this._timer);
其中Check程序是用來判斷relatedTarget是不外部元素，即鼠標離開的元素是不是外部元素。
如果是外部元素，就說明當前是隱藏延時階段，那么只要清除定時器來取消隱藏就可以了。
這里的外部元素是指觸發(fā)元素和Tip對象本身及其內(nèi)部元素以外的元素。
這個有點拗口，那再看看Check程序是怎么判斷的就明白了：

首先判斷_trigger是否存在，不存在的話說明是剛開始觸發(fā)，也看成是外部觸發(fā)。
存在的話再判斷傳遞過來的元素是不是Tip或觸發(fā)元素本身，最后再用Contains判斷判斷是不是在Tip或觸發(fā)元素內(nèi)部。
ps：關(guān)于Contains請參考這里的比較文檔位置。
這樣得到的是判斷是否內(nèi)部元素，最后取反就是判斷是否外部元素了。
【點擊方式】
點擊方式顯示是指點擊觸發(fā)元素的時候顯示Tip。
在Add程序中會給觸發(fā)元素的click事件綁定以下程序：

首先根據(jù)ClickShow判斷是否進行點擊顯示，再用CheckShow檢測是否同一個觸發(fā)對象。
CheckShow程序是這樣的：

如果不是同一個觸發(fā)對象，就先執(zhí)行Hide清理前一個觸發(fā)對象，防止沖突，再執(zhí)行ReadyShow來顯示。
如果是同一個觸發(fā)對象，就說明當前是延時隱藏階段，清除定時器保持顯示狀態(tài)就行了。
對應(yīng)的，點擊方式隱藏是指點擊外部元素的時候隱藏Tip。
在ReadyShow里，當使用點擊方式隱藏時，就會把_fCH綁定到document的click事件里：
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH);
注意這里要把隱藏綁定事件放到ReadyShow，而不是Show里面，因為延時的時候有可能還沒有顯示就觸發(fā)了隱藏事件。
其中_fCH是在初始化時定義的一個屬性，用于添加和移除點擊隱藏事件：

注意不同于點擊顯示，由于綁定的是document，隱藏前要先確定e.target是不是外部元素。
其中CheckHide是作用是檢查Tip當前是不是隱藏狀態(tài)：

如果本來就是隱藏狀態(tài)，清除定時器移除事件就行，不需要再執(zhí)行Hide了。
【觸發(fā)方式】
觸發(fā)方式針對的是mouseover和mouseout，它的流程跟點擊方式是差不多的。
觸發(fā)方式顯示是指鼠標從外部元素進入觸發(fā)元素（觸發(fā)mouseover）的時候顯示Tip。
在Add程序中會給觸發(fā)元素的mouseover事件綁定以下程序：

跟點擊方式類似，也需要執(zhí)行一次CheckShow，但不同的是，還會用Check判斷e.relatedTarget是不是外部對象。
這是因為mouseover可能是從觸發(fā)元素的內(nèi)部元素（包括Tip）進入或內(nèi)部元素冒泡觸發(fā)的，而這些情況不需要任何操作。
對應(yīng)的，觸發(fā)方式隱藏是指鼠標從觸發(fā)元素或Tip離開時隱藏Tip。
當TouchHide為true時，在ReadyShow的時候會把_fTH綁定到觸發(fā)元素的mouseout事件里：
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH);
在Show的時候，再綁定到Tip的mouseout：
this.IsClick(trigger.HideType) && addEvent(document, "click", this._fCH);
在ReadyShow綁定的原因同上，而Tip只需顯示時綁定。
其中_fTH跟_fCH類似，也是在初始化時定義的一個屬性，用于添加和移除觸發(fā)隱藏事件：

不同的是mouseout在Check的時候是用e.relatedTarget。
【觸發(fā)原理】
上面是從程序的角度說明了觸發(fā)顯示和隱藏的過程，但要真正理解的話還需要做一次細致的分析。
下面是以觸發(fā)方式的顯示隱藏為例做的流程圖：

下面是文字說明：
1，等待觸發(fā)顯示；
2，進入觸發(fā)元素，如果設(shè)置延時，跳到3，如果沒有設(shè)置延時，跳到4；
3，延時時間內(nèi)，離開到外部元素，清除定時器，返回1，超過延時時間，跳到4；
4，執(zhí)行顯示程序；
5，顯示Tip狀態(tài)；
6，離開觸發(fā)元素，如果是進入到Tip，跳到7，如果是離開到外部元素，跳到9；
7，保持顯示狀態(tài)；
8，離開Tip，如果是進入觸發(fā)元素，返回5，如果是離開到外部元素，跳到9；
9，如果設(shè)置延時，跳到10，如果沒有設(shè)置延時，跳到11；
10，延時時間內(nèi)，如果進入Tip，清除定時器，返回7，如果進入觸發(fā)元素，清除定時器，返回5，超過延時時間，跳到11；
11，執(zhí)行隱藏程序，返回1；

再對照程序，應(yīng)該就能理解整個流程了，當然可能還不是那么好理解。
這個流程也只是單例的情況，多例的時候還要多加一些判斷。
可以說這個流程看似不難，但如果想做一個最優(yōu)化的流程，那要考慮的細節(jié)地方可能會讓人受不了。
點擊方式跟觸發(fā)方式的流程是差不多的，而且更簡單，這里就不重復(fù)了。


【元素定位】

完成了顯示隱藏，就到本程序另一個重點，元素定位。
程序使用一個GetRelative函數(shù)，通過定位元素、參考元素和參數(shù)對象來獲取形如{ Left: 100, Top: 200 }的定位參數(shù)結(jié)果。
計算結(jié)果結(jié)合了以下定位方式：預(yù)設(shè)定位，自定義定位，自適應(yīng)定位。
觸發(fā)對象的Fixed屬性就是用來保存定位參數(shù)對象的，包括一下屬性：
屬性: 默認值//說明
Align: "clientleft",//水平方向定位
vAlign: "clienttop",//垂直方向定位
CustomLeft: 0,//自定義left定位
CustomTop: 0,//自定義top定位
PercentLeft: 0,//自定義left百分比定位
PercentTop: 0,//自定義top百分比定位
Adaptive: false,//是否自適應(yīng)定位
Reset: false//自適應(yīng)定位時是否重新定位
下面再看看如何通過這些屬性設(shè)置定位。


【預(yù)設(shè)定位和自定義定位】

預(yù)設(shè)定位的意思是使用程序25個預(yù)設(shè)位置來定位。
25個位置是怎么來的呢？看下面的具體演示：