這裡我用jQuery做了個提示彈窗的js，並做了個小demo，簡單總結下：
方位
根據當前鼠標所處的位置不同，箭頭所指向的方向也不同：
左上方（left-top）（缺省）、左下方（left-bottom）、右上方（right-top）、右下方（right-bottom）、上左方（top-left）、上右方（top-right）、下左方（bottom-left）、下右方（bottom-right）
優先級
以上各種情況優先級依次降低
探測思路
探測基本思路是:
首先，也是前提條件，判斷容器的高或寬是否是彈窗對應的高或寬的兩倍，之所以是兩倍，因為臨界點是目標容器的各個邊的中點
/*
* 先判斷目標容器的高度或者寬度是否是容器對應高度或寬度與箭頭尺寸之和的兩倍，否則，報錯。之所以是2倍，因為臨界點是目標容器的各個邊的中點。
*/
接下來，可以依據優先級去逐個判斷：
/*
* 思路是，先檢測左側，再檢測右側，左右都放不下，則檢測頂部，都排除，再考慮底部。檢測左右側時，先考慮頂部能否放下；檢測上下時，先考慮據左右側那邊的距離大。
* 1.檢測左側時，判斷上下距離能否放下箭頭偏移量,有一個不能放下（例如top），則為['top', 'left']，右側一樣
* 2.檢測上下時，判斷左右距離能否放下箭頭偏移量（缺省為上,即top），有一側不能放下，即為鼠標偏向的一側（若left<right，則left），則為['top', 'left']，此時箭頭偏移量為0，隨鼠標移動,鼠標left增大，則增大，最大至偏移量。
* 缺省是左側，頂部。
*/
具體情況判斷：
•根據優先級，先判斷鼠標右側能否放下彈窗:
◦能放下，則去判斷能否再放進個箭頭
■若能放下
■則判斷頂部是否能放下個箭頭，包括箭頭的偏移量，若能
■判斷頂部能放下箭頭包括偏移量並且不會超過目標容器高度，則為left-top
■否則如果頂部大於彈窗高度，並底部可放下箭頭包括其偏移量，則為left-bottom
■否則，判斷底部能放下箭頭和彈窗，則為top-left
■否則，基於我們的前提條件，是bottom-left
■若不能放下，判斷底部能不能放下彈窗和箭頭
■能，則為top-left
■否則，為bottom-left
◦不能放下，則left考慮完，換right，同樣的思路
八種情況彈窗的情況和位置
舉例top-left
. 代碼如下:
case 'top-left' :
// top 加上 箭頭尺寸
this.conObj.css('top', top + tarTop);
// 判斷left距離
if ( left < arrOffset ) {
// 緊貼左邊
this.conObj.css('left', tarLeft);
} else if (right < (conWidth - arrOffset)) { // 如果right,撐不下自身在右邊的距離（conWidth - arrOffset）,則left值減小，箭頭跟隨鼠標，使自己右邊與容器對齊
// 正常顯示的left, 減去右側還需要的寬度((conWidth - arrOffset) - right ), left - arrOffset - ((conWidth - arrOffset) - right ),得出tarWidth - conWidth
// 換種思路，緊貼右邊，即左邊距離為，目標容器寬度減去自身寬度
this.conObj.css('left', tarWidth - conWidth + tarLeft);
} else { // 正常顯示的left
this.conObj.css('left', left - arrOffset + tarLeft);
}
break;
八種情況下箭頭的情況和位置
同樣以top-left為例
. 代碼如下:
case 'top-left' :
this.arrowObj.prependTo(this.conObj);
// 如果con緊貼右邊,此時，箭頭隨鼠標移動
if (conLeft === 0 && (conWidth > (right + arrOffset))) {
this.arrowObj.css('left', conWidth - right - arrowPos);
} else {
this.arrowObj.css('left', arrowPos);
}
break;
最後說下在寫代碼時候的些許感悟：
寫的代碼，在重構了N遍，寫完N行注釋後，忽然想到，其實不論是寫代碼，還是生活，我們都是有個既定的或者約定俗成的前提或者說規范的。而一旦這個規范被打破，往往前功盡棄，即使不是，往往也很受傷。實例小至代碼、大至社會，無一例外