JQuery制作的toolTip

工具提示条是许多应用程序中常见的特性，WEB浏览器也不例外。而我们可以通过自定义的文本来模拟工具提示条，这样就能在适当的地方提醒用户应该怎么操作，起到适当引导操作的效果，也算是小小的人性化设计。对于toolTip这种小功能如果用Javascript来实现也要相当的代码量，而用JQuery则比较清晰明了，让我们专注于功能代码的编写。

以下为最基础的toolTip模型：

show me the money

follow me...

以下是JQuery代码：

 1 <script type="text/javascript">
 2     this.toolTip = function(){
 3         var positionTooltip = function(event){
 4             var tPosX = event.pageX - 5;
 5             var tPosY = event.pageY +20;
 6             $('div.tooltip').css({top:tPosY, left:tPosX});
 7         };
 8         var showTooltip = function(event){
 9             //$('div.tooltip').remove();
             thisTxt = $(this).attr('title');
             $(this).attr('title'," ");
             $('<div class="tooltip">'+ thisTxt +'</div>').appendTo('body');
             positionTooltip(event);
         };
         var hideTooltip = function(){
             $(this).attr('title', thisTxt);
             $('div.tooltip').remove();
         };
         $('a.show').hover(showTooltip , hideTooltip).mousemove(positionTooltip);
     };
 $(document).ready(function(){
     toolTip();
 });
 </script>
 

html代码非常简单，只要给a标签一个class做为程序调用的钩子就可以了

 <div class="test">
     <p><a href="#" class="show" title="We don't have anymore money!">show me the money</a></p>
     <p><a href="#" class="show" title="follow me! go!go!go!">follow me</a></p>
 </div>