好久没折腾,这几天无聊更新了主题,发现Tooltip这个怎么设计自己总是设计不好,查了好久,先总结下:
不说了直接贴代码和方法:
1.添加js(添加在哪里根据自己的实际情况,去掉?)

  1. jQuery(document).ready(function($) {  
  2.     var sweetTitles = {  
  3.         x: 10,  
  4.         y: 20,  
  5.         tipElements: "a,span,img,div ",  
  6.         noTitle: false,  
  7.         init: function() {  
  8.             var noTitle = this.noTitle;  
  9.             $(this.tipElements).each(function() {  
  10.                 $(this).mouseover(function(e) {  
  11.                     if (noTitle) {  
  12.                         isTitle = true;  
  13.                     } else {  
  14.                         isTitle = $.trim(this.title) != '';  
  15.                     }  
  16.                     if (isTitle) {  
  17.                         this.myTitle = this.title;  
  18.                         this.title = "";  
  19.                         var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";  
  20.                         $('body').append(tooltip);  
  21.                         $('.tooltip').css({  
  22.                             "top": (e.pageY + 20) + "px",  
  23.                             "left": (e.pageX - 20) + "px"  
  24.                         }).show('fast');  
  25.                     }  
  26.                 }).mouseout(function() {  
  27.                     if (this.myTitle != null) {  
  28.                         this.title = this.myTitle;  
  29.                         $('.tooltip').remove();  
  30.                     }  
  31.                 }).mousemove(function(e) {  
  32.                     $('.tooltip').css({  
  33.                         "top": (e.pageY + 20) + "px",  
  34.                         "left": (e.pageX - 20) + "px"  
  35.                     });  
  36.                 });  
  37.             });  
  38.         }  
  39.     };  
  40.     $(function() {  
  41.         sweetTitles.init();  
  42.     });  
  43. });  

2.css部分(如上)

  1. .tooltip {  
  2.  font-size: 12px;  
  3.  font-family: \5b8b\4f53;  
  4.  line-height: 1.5;  
  5.  position: absolute;  
  6.  padding: 5px;  
  7.  z-index: 100003;  
  8.  opacity: .8  
  9. }   
  10. .tipsy-arrow {  
  11.  position: absolute;  
  12.  width: 0;  
  13.  height: 0;  
  14.  line-height: 0;  
  15.  border: 6px dashed #FFA500;  
  16.  top: 0;  
  17.  left: 20%;  
  18.  margin-left: -5px;  
  19.  border-bottom-style: solid;  
  20.  border-top: 0;  
  21.  border-left-color: transparent;  
  22.  border-right-color: transparent  
  23. }  
  24.    
  25. .tipsy-arrow-n {  
  26.  border-bottom-color: #FFA500;  
  27. }  
  28.    
  29. .tipsy-inner {  
  30.  background-color: #FFA500;  
  31.  color: #fff;  
  32.  max-width: 200px;  
  33.  padding: 5px 8px 4px 8px;  
  34.  text-align: center;  
  35.  border-radius: 3px  
  36. }  

还有什么呢?表示没有了,至此工作全部完成!去测试吧。

正文到此结束