使用 jQuery 實作 Tips 功能 【加強版】

在先前一篇 「使用 jQuery 實作 Tips 功能」文章提到實作 Tips 的方法，但在實際的運行上，出現一些惱人的問題，就是出現Tips的視窗，如果剛好是在瀏覽器的邊邊角角地帶，就會有部份內容被截斷。

對於這問題，就需要進一步去計算是否當下情況是屬於這種邊邊角角的問題。經過一番測試，結合前人的智慧，整理出暫時滿意的結果。

我另外撰寫了判斷 Tips 出現的相對位置：

function getScrollInfo()
{
  switch(document.compatMode.toUpperCase())
  {
 case "BACKCOMPAT":
 {
  return document.body;
 }
 default:
 {
 return document.documentElement;
 }
 }
}     

function returnX(e)
{
    var TipWidth=300; //Tips 寬度設定
    var oBody = getScrollInfo();
    var maxWidth = oBody.scrollLeft + oBody.clientWidth;  
    var result=0;  
    
    if( (oBody.scrollLeft + e.clientX) > (maxWidth - TipWidth) )
        result=maxWidth - TipWidth - 15
    else
        result=oBody.scrollLeft + e.clientX - 15
    return result;
}

function returnY(e)
{
    var TipHigh=50; //Tips 高度設定(預估值)
    var oBody = getScrollInfo();    
    var maxHeight = oBody.scrollTop + oBody.clientHeight - 3;
    var result=0;  
    
    if( (oBody.scrollTop + e.clientY) > (maxHeight - TipHigh) )
        result=e.clientY + oBody.scrollTop - TipHigh - 15
    else
        result=oBody.scrollTop + e.clientY + 15
    return result;
}

透過上述的函式，可以去修改原先的 code 為：
.mousemove(function(e){ $('.tool-tips').css('top',returnY(e));
$('.tool-tips').css('left',returnX(e)); })

將完整程式 整理如下：

<style>
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:300px; } 
.tool-text{ padding: 4px 8px 8px; font-size:12px; color: black; background: #FFFFCC bottom right; border-style:outset;} 
</style>


<script>
//jQuery tips function
$(document).ready(
function()
{ 
$('<div class="tool-tips"><div class="tool-text"></div></div>').appendTo('body'); 
$('.ShowTips').mouseover(function(){ $(this).css('cursor','help'); $('.tool-tips').css('visibility','visible'); $('.tool-tips');

var xixu = this; 
if(xixu.title)
{xixu.yishi=xixu.title;xixu.title='';} 
var dual = xixu.yishi.split('::'); 
if(dual.length>1)
{ myTitle = dual[0]; myText = dual[1]; }
else
{ myTitle = $(this).text(); myText = xixu.yishi; } $('.tool-title').html(myTitle); 
$('.tool-text').html(myText); }).mousemove(function(e){ $('.tool-tips').css('top',returnY(e)); 
$('.tool-tips').css('left',returnX(e));    }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); }) }) 
     
     
function getScrollInfo()
{
 switch(document.compatMode.toUpperCase())
 {
  case "BACKCOMPAT":
  {
   return document.body;
  }
  default:
  {
   return document.documentElement;
  }
 }
}     

function returnX(e)
{
    var TipWidth=300; //Tips 寬度設定
    var oBody = getScrollInfo();
    var maxWidth = oBody.scrollLeft + oBody.clientWidth;  
    var result=0;  
    
    if( (oBody.scrollLeft + e.clientX) > (maxWidth - TipWidth) )
        result=maxWidth - TipWidth - 15
    else
        result=oBody.scrollLeft + e.clientX - 15
    return result;
}

function returnY(e)
{
    var TipHigh=50; //Tips 高度設定(預估值)
    var oBody = getScrollInfo();    
    var maxHeight = oBody.scrollTop + oBody.clientHeight - 3;
    var result=0;  
    
    if( (oBody.scrollTop + e.clientY) > (maxHeight - TipHigh) )
        result=e.clientY + oBody.scrollTop - TipHigh - 15
    else
        result=oBody.scrollTop + e.clientY + 15
    return result;
}
</script>

此外，這次不再使用 <acronym> 來當作使用 Tips 的標籤，而是只要 class 屬性 = "ShowTips" ，就自動套用 Tips 功能。所以，叫用範例如下：
<img class="ShowTips" title="本院主要規劃單位。" src="../images/help.gif" />

[補充：20100225]
看到另一個關於 jQuery tips 的 plug-in ，功能更是強大，如果需要製作更精美的 Tips 介面，可以參考以下網址：

http://plugins.jquery.com/project/bt
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
http://urin.github.com/jquery.balloon.js/

下圖是該 plug-in 做出來的展示圖：