jQuery - 利用CSS製作簡易的tooltip

一般我們可以使用預設的html各元件的屬性title來製作簡易的tip功能。但其實我們可以自訂

一個tip區塊並先行隱藏起來，當某個元件要顯示tip時，可取其元件的位置來訂定tip要位移的

量，如此該tip區塊就會與該元件形影不離XD

  如有一個輸入區塊旁有個問號圖示，當滑鼠移至該圖示，則會顯示tip區塊。

透過下面簡短的jquery code即可達到此項功能

$('#問號ID值').mouseenter(function() {  
     var position=$(this).position();
     $('#tip區塊ID值').css({
         left:(position.left+35)+ "px",
         top:(position.top+20)+ "px"
     });
     $('#tip區塊ID值').show();   
}); 
$('#問號ID值').mouseleave(function() {  
     $('#tip區塊ID值').hide();   
});

如此一來，就可以利用問號位置來決定tip區塊的位移量。