[文章目录]显示/隐藏

在我以前的博客发过
这次跟上次不同
主要评论区看IP和版本,没这个提示功能,
感觉怪怪的,所以折腾了一下,
效果看我的评论区

使用方法

使用比较绿色的做法,
提示工具的样式使用CSS自定义,
jQuery只是定义显示的位置.
所以需要在引进插件的同时，
也要增加一点样式.

jQuery代码

 
  1. ! function(a) {  
  2.     a.fn.toolTip = function(b) {  
  3.         return this.each(function() {  
  4.             function m(b) {  
  5.                 var c = a("#" + k);  
  6.                 c.css({  
  7.                     top: b.pageY + parseInt(j),  
  8.                     left: b.pageX + parseInt(i)  
  9.                 }).show("fast"), null != h && (h.indexOf("left") >= 0 && c.css({  
  10.                     left: "auto",  
  11.                     right: f - parseInt(b.pageX) + parseInt(i)  
  12.                 }), h.indexOf("top") >= 0 && c.css({  
  13.                     top: b.pageY - parseInt(g) - parseInt(j)  
  14.                 }))  
  15.             }  
  16.             var c = {  
  17.                 positionPro: "position",  
  18.                 positionValue: null,  
  19.                 positionX: "10",  
  20.                 positionY: "20",  
  21.                 tipEle: "tooltip",  
  22.                 tipText: "title",  
  23.                 tipFlag: !0  
  24.             }, d = a.extend({}, c, b),  
  25.                 e = a(this),  
  26.                 f = a(window).width(),  
  27.                 g = e.outerHeight(),  
  28.                 h = void 0 != e.attr(d.positionPro) ? e.attr(d.positionPro) : d.positionValue,  
  29.                 i = void 0 != e.attr("positionX") ? e.attr("positionX") : d.positionX,  
  30.                 j = void 0 != e.attr("positionY") ? e.attr("positionY") : d.positionY,  
  31.                 k = d.tipEle,  
  32.                 l = e.attr(d.tipText);  
  33.             0 != d.tipFlag && void 0 != e.attr(d.tipText) && e.on("mouseover", function(b) {  
  34.                 if (a(this), this.title = "", void 0 != l) {  
  35.                     var d = "<div id='" + k + "'><p>" + l + "</p></div>";  
  36.                     a("body").append(d)  
  37.                 }  
  38.                 m(b)  
  39.             }).on("mouseout", function() {  
  40.                 this.title = l, a("#" + k).remove()  
  41.             }).on("mousemove", function(a) {  
  42.                 m(a)  
  43.             })  
  44.         })  
  45.     }  
  46. }(jQuery);  

加载效果

 
  1. <script>  
  2. $(function(){  
  3. $("#links a").toolTip();  // #links 改成你的需要的  id 或者 class  
  4. })  
  5. </script>  

css样式

 
  1. #tooltip{position:absolute;z-index:1000;max-width:300px;width:auto;margin:0; padding:0;background:#181818; opacity: .8;}  
  2. #tooltip p{padding:5px 10px; margin:0;color:#FFFFFF;font-family:Arial,Helvetica,Sans-serif;}  

教程结束

大家去试试吧