jQuery.Tips

body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,form,button,input,textarea,th,td{margin:0;padding:0;}
img{ -ms-interpolation-mode: bicubic;border:0}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
input,button,textarea,select{font-size:inherit;*font-size:100%;font-family:inherit; vertical-align:middle; margin:0; padding:0;outline:none;}
i,em,b,code{font-style:normal;font-weight:normal;}
label{ cursor:pointer}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
/*-------------end reset------------*/
.wrap{width:960px; margin:0 auto}
body{font-size:12px; line-height:22px}

/*下面是tips需要加入的css*/
.tips{ position:absolute}
.tips .tipBd{ padding:2px 5px 0; position:relative; z-index:0}
.tips .ico{position: absolute; display: inline-block; font-size: 0; background:url(../i/sprite.gif) no-repeat; z-index:1}
.tipHd, .tipHd b, .tipFt, .tipFt b {background:url(../i/sprite.gif) no-repeat; font-size: 0; height: 4px}
.tipHd b,.tipFt b{float: right; padding-right: 4px}

.blue_tipBd{background:#F5FAFF;  border-left: 1px solid #56BCDB; border-right: 1px solid #56BCDB}
.blue_tipHd{background-position:-200px 0px}
.blue_tipHd b{background-position:right 0px}
.blue_tipFt{background-position:-200px -4px}
.blue_tipFt b{background-position:right -4px}

.blue_up{ padding-top:4px}
.blue_up .ico{ width:9px;height:5px; background-position:0 0; margin-left:-5px; top:0}
.blue_lt{ padding-left:4px}
.blue_lt .ico{ width:5px;height:9px; background-position:-100px 0; margin-top:-5px; left:0}
.blue_rt{ padding-right:4px}
.blue_rt .ico{ width:5px;height:9px; background-position:-150px 0; margin-top:-5px; right:0}
.blue_dn{ padding-bottom:4px}
.blue_dn .ico{ width:9px;height:5px; background-position:-50px 0; margin-left:-5px; bottom:0}

.blue_tipBd{background:#F5FAFF;  border-left: 1px solid #56BCDB; border-right: 1px solid #56BCDB}
.blue_tipHd{background-position:-200px 0px}
.blue_tipHd b{background-position:right 0px}
.blue_tipFt{background-position:-200px -4px}
.blue_tipFt b{background-position:right -4px}

 

.red_tipBd{background:#fffaf5;  border-left: 1px solid #ff6031; border-right: 1px solid #ff6031}
.red_tipHd{background-position:-200px -10px}
.red_tipHd b{background-position:right -10px}
.red_tipFt{background-position:-200px -14px}
.red_tipFt b{background-position:right -14px}

.red_up{ padding-top:4px}
.red_up .ico{ width:9px;height:5px; background-position:0 -10px; left:50%; margin-left:-5px; top:0}
.red_lt{ padding-left:4px}
.red_lt .ico{ width:5px;height:9px; background-position:-100px -10px;top:50%; margin-top:-5px; left:0}
.red_rt{ padding-right:4px}
.red_rt .ico{ width:5px;height:9px; background-position:-150px -10px;top:50%; margin-top:-5px; right:0}
.red_dn{ padding-bottom:4px}
.red_dn .ico{ width:9px;height:5px; background-position:-50px -10px;left:50%; margin-left:-5px; bottom:0}

 

 

.green_tipBd{background:#f5fff7;  border-left: 1px solid #47FF32; border-right: 1px solid #47FF32}
.green_tipHd{background-position:-200px -20px}
.green_tipHd b{background-position:right -20px}
.green_tipFt{background-position:-200px -24px}
.green_tipFt b{background-position:right -24px}

.green_up{ padding-top:4px}
.green_up .ico{ width:9px;height:5px; background-position:0 -20px; margin-left:-5px; top:0}
.green_lt{ padding-left:4px}
.green_lt .ico{ width:5px;height:9px; background-position:-100px -20px; margin-top:-5px; left:0}
.green_rt{ padding-right:4px}
.green_rt .ico{ width:5px;height:9px; background-position:-150px -20px; margin-top:-5px; right:0}
.green_dn{ padding-bottom:4px}
.green_dn .ico{ width:9px;height:5px; background-position:-50px -20px; margin-left:-5px; bottom:0}

.black_tipBd{background:#030000; color:#fff}
.black_tipHd{background-position:-200px -30px}
.black_tipHd b{background-position:right -30px}
.black_tipFt{background-position:-200px -34px}
.black_tipFt b{background-position:right -34px}

.black_up{ padding-top:4px}
.black_up .ico{ width:9px;height:5px; background-position:0 -30px; margin-left:-5px; top:0}
.black_lt{ padding-left:4px}
.black_lt .ico{ width:5px;height:9px; background-position:-100px -30px; margin-top:-5px; left:0}
.black_rt{ padding-right:4px}
.black_rt .ico{ width:5px;height:9px; background-position:-150px -30px; margin-top:-5px; right:0}
.black_dn{ padding-bottom:4px}
.black_dn .ico{ width:9px;height:5px; background-position:-50px -30px; margin-left:-5px; bottom:0}

 

.close-ico{
    background:url(../i/sprite.gif) no-repeat -160px 0;
    display: block;
    height: 16px;
    overflow: hidden;
    position: absolute;
    right: 5px;
 margin-left:5px;
    text-indent: -900px;
    top: 2px;
    width: 16px;
}
.close-ico:hover { background-position:-160px -16px; }

 

 

 

 

 

(function($) {
    var tips;
    var tipsDivs = [];
    //窗口变化重定位窗口大小
    window.onresize = function() {
        $.each(tipsDivs,
        function(n, value) {
            tips.setPosition(value.opts, value.obj, value.tipsDiv);
        })
    }
    var lastID = {};
    $.fn.tips = function(opts) {
        var obj = $(this);
  $(this).css("cursor","pointer");
        opts = opts || {};
        opts = $.extend({},tips.config, opts); //初始化配置
        if (opts.showOn != 'none') {
            switch (opts.showOn) {
            case 'click':
                obj.bind({
                    'click':
                    function(event) {
      tips.eventIn($(this), lastID, opts);
                    },
                    'mouseleave': function(event) {
                        var the = $(this);
                        $("body").bind({
                            'click': function() {
                                var tipDiv = $('#' + the.attr("tips"));
                                tips.setAniDuration(opts, "out", tipDiv);
                            }

                        });
                        $(this).click(function(event) {
                            event.stopPropagation();
                        });
                    }
                });
    if (opts.goshow == true) {
     obj.trigger("click").trigger("mouseleave");
    }
                break;
            case 'focus':
                obj.bind({
                    'focusin':
                    function() {
                        tips.eventIn($(this), lastID, opts);
                    },
                    'focusout': function() {
                        var tipDiv = $('#' + $(this).attr("tips"));
                        tips.setAniDuration(opts, "out", tipDiv);
                    }
                });
                break;
            case 'hover':
                {
                    var timeOut = null;
                    obj.bind({
                        'mouseleave': function() {
                            var tipDiv = $('#' + $(this).attr("tips"));
                            if (opts.alignTo == "target" && opts.allowTipHover == true) {
                                timeOut = setTimeout(function() {
                                    tips.setAniDuration(opts, "out", tipDiv);
                                },
                                opts.timeOnScreen);
                            } else {
                                tips.setAniDuration(opts, "out", tipDiv);
                            }
                        },
                        'mouseenter': function() {
                            var tipDiv = tips.eventIn($(this), lastID, opts);
                            if (opts.alignTo == "target" && opts.allowTipHover == true) {
                                //给tips注册一个事件
                                tipDiv.bind({
                                    'mouseenter': function() {
                                        clearTimeout(timeOut);
                                    },
                                    'mouseleave': function() {
                                        tips.setAniDuration(opts, "out", tipDiv);
                                    }
                                })
                            }
                            if (opts.alignTo == "cursor") {
                                $(this).bind({
                                    mousemove: function(event) {
                                        //跟随鼠标设置
                                        var tipDiv = $('#' + $(this).attr("tips"));
                                        var pageX = event.clientX + $(window).scrollLeft() + 5;
                                        var pageY = event.clientY + $(window).scrollTop() + 5;
                                        tipDiv.css({
                                            top: pageY + "px",
                                            left: pageX + "px"
                                        });
                                    }
                                })
                            }

                        }

                    });
                    break;

                }
            }
        } else {
            $.each(obj,
            function() {
                tips.insertTips(opts, $(this));
                var tipDiv = $('#' + $(this).attr("tips"));
                tipDiv.hide();
            });

        }
  return obj;  
    }

    tips = {
        index: 0,
        config: {
            width: "auto",
   maxWidth: 240,
            height: "auto",
            //NUM
            url: false,
            content: "",
   img:"",
   imgMaxWidth:400,
   goshow:false,
   closeBtn:false,
            style: "blue",//blue red green
            showTimeout: 200,
            hideTimeout: 200,
            timeOnScreen: 1000,
            showOn: "hover",
            //hover focus click none
            alignTo: "target",
            //cursor
            alignX: "center",
            //right left center
            alignY: "top",
   arrowX: "50%",
   arrowY: "10px",
            //bottom center top
            offsetX: 0,
            offsetY: 0,
            allowTipHover: false,
            // followCursor:     true,
            bubble: true,
   fade: false,
   bubbleDistance: 20,
   bubbleSpeed:250,
            iframe: false,
            callback: function() {
    }

        },
        eventIn: function(the, theLastID, opts) {
   if (opts.content == "") {
    opts.content = the.attr("title");  //取元素的title属性值
    
   }
            if (!jQuery.isEmptyObject(theLastID)) {
                if (the.attr("tips") != theLastID.tipDiv.attr("id")) {
                    tips.setAniDuration(lastID.opts, "out", theLastID.tipDiv);
                }
           
            }
            if (the.attr("tips") == null) {
                tips.insertTips(opts, the);
                var tipDiv = $('#' + the.attr("tips"));
                theLastID = {
                    tipDiv: tipDiv,
                    opts: opts
                };
            }
   else {
    var tipDiv = $('#' + the.attr("tips"));
                if (tipDiv.is(":hidden")) {
                    tips.setAniDuration(opts, "in", tipDiv);
                    theLastID = {
                        tipDiv: tipDiv,
                        opts: opts
                    };
                } else {
                    if (opts.alignTo != "cursor") {
                        tips.setAniDuration(opts, "out", tipDiv);
                    }

                }
   }
            lastID = theLastID;
            return tipDiv;
        },
        setPosition: function(opts, obj, div) {
            var t = obj.offset().top;
            var l = obj.offset().left;
            var w = obj.outerWidth();
            var h = obj.outerHeight();
   var arrowMiddleX = opts.arrowX;
   var arrowMiddleY = opts.arrowY;
   if (opts.alignY == "top"){
    if(opts.alignX == "left") {
     l = l - div.outerWidth();
     div.find(".ico").css("top",arrowMiddleY);
    }
    else if(opts.alignX == "right"){
       l = l + obj.outerWidth();
       div.find(".ico").css("top",opts.arrowY);
    }
    else {
     l = l + obj.outerWidth()/2 - div.outerWidth()/2;
     t = t - div.outerHeight();
     div.find(".ico").css("left",arrowMiddleX);
    }
   }
   if (opts.alignY == "bottom"){
     t = t + obj.outerHeight();
     if(opts.alignX == "right"){
       l = l + obj.outerWidth() - div.outerWidth();
     }
     if(opts.alignX == "center") {
      l = l + obj.outerWidth()/2 - div.outerWidth()/2;
     }
    div.find(".ico").css("left",opts.arrowX);

   }
   if (opts.alignY == "center"){
    t = t + obj.outerHeight()/2 - div.outerHeight()/2 ;
    if(opts.alignX == "left") {
     l = l - div.outerWidth();
     div.find(".ico").css("top",arrowMiddleY);
    }
    else if(opts.alignX == "right"){
       l = l + obj.outerWidth();
       div.find(".ico").css("top",arrowMiddleY);
    }
   }
            l = l + opts.offsetX;
            t = t + opts.offsetY;
   div.css({left:l,top:t});
        },
        setDirection: function(opts) {
            var direction;
   if (opts.alignY == "top") direction = "dn";
   if (opts.alignX == "left") direction = "rt";
            else if (opts.alignX == "right") direction = "lt";
   if (opts.alignY == "bottom") direction = "up";
            if (opts.alignTo == "cursor") direction = null;
            return direction;
        },
        insertTips: function(opts, obj) {
   var tipsDiv;
            var direction = tips.setDirection(opts);
            the = obj;
            if (opts.url) {
                if (!opts.iframe) {
                    $.ajax({
                        type: (opts.ajaxType || 'GET'),
                        data: (opts.data || ''),
                        url: opts.url,
                        success: function(data) {
                            tipsDiv.find(".tipBd").html(data);
                            var position = tips.setPosition(opts, obj, tipsDiv);
                            tips.setAniDuration(opts, "in", tipsDiv);
                            opts.content = data;
                            opts.callback(the,data);
                        }

                    });
                    opts.content = "Loading...";
                } else opts.content = '<iframe class="tipsif " id=tip' + tips.index + ' style="width:100%; height:' + opts.height + 'px"  frameborder="0" hspace="0" src="' + opts.url + ' "></iframe>';
            }
   var closeBtn = "";
   if (opts.closeBtn) {
       closeBtn = '<a href="#" class="close-ico" οnclick="return false"></a>';
   }
   
   if (opts.img != "") {
    tipsDiv = $('<div style="display:none; width:48px; height:32px" class="tips ' + opts.style+'_'+direction + '"id=tip' + tips.index + '><i class="ico" id="iB"></i><div class="tipHd '+opts.style+'_tipHd"><b></b></div><div class="tipBd '+opts.style+'_tipBd">' + '<img src="tips/i/loading.gif" width="16" height="16" />' + ''+closeBtn+'</div><div class="tipFt '+opts.style+'_tipFt"><b></b></div></div>');
   }else {
    tipsDiv = $('<div  style="display:none" class="tips ' + opts.style+'_'+direction + '"id=tip' + tips.index + '><i class="ico" id="iB"></i><div class="tipHd '+opts.style+'_tipHd"><b></b></div><div class="tipBd '+opts.style+'_tipBd">' + opts.content + ''+closeBtn+'</div><div class="tipFt '+opts.style+'_tipFt"><b></b></div></div>');
    if (opts.closeBtn) {
     tipsDiv.find(".tipBd").css("paddingRight",parseInt(tipsDiv.find(".tipBd").css("paddingRight")) + 16);
    }
   }
 
            the.attr("tips", "tip" + tips.index);
            lastID = tips.index;
          tipsDiv.appendTo("body");   
            var position = tips.setPosition(opts, the, tipsDiv);
   tips.setAniDuration(opts, "in", tipsDiv);
   
   /*图片未加载先获得尺寸并处理*/
     if (opts.img != "") {
    imgReady(opts.img, function () {
      var thiswidth  = this.width;
      var thisheight = this.height;
      var wait=setInterval(function(){
                  if(!tipsDiv.is(":animated")){
         if (thiswidth > opts.imgMaxWidth){
           maxWidth = opts.imgMaxWidth +"px";
           tipsDiv.width(opts.imgMaxWidth + 12);
              tipsDiv.height("auto");
             } else{
           maxWidth = thiswidth +"px";
        tipsDiv.width(thiswidth + 12);
           tipsDiv.height(thisheight + 10);
          }
       tipsDiv.find(".tipBd").html('<img style="width:'+maxWidth+'" src="'+opts.img+'">');
                      clearInterval(wait);
       tips.setPosition(opts, obj, tipsDiv);
                  }
              },200);
    });
   
   }
   
            tipsDivs[tips.index] = {
                obj: the,
                tipsDiv: tipsDiv,
                opts: opts
            };
   if(!opts.iframe && !opts.url){
    opts.callback(the);
   }
            tips.index++;
        },
        setAniDuration: function(opts, status, obj) {
   $(".tips:animated").stop(false,true);  //开始新动画之前保证老动画关闭
            $.each(obj,
            function() {     
    var the = $(this);
                if (opts.fade || opts.alignTo == "cursor") {
                    if (status == "in") {
        $(this).fadeIn(opts.showTimeout);
                    } else if (status == "out") {
                       $(this).fadeOut(opts.hideTimeout);
                    }

                } else if (opts.bubble && opts.alignTo != "cursor") {
     var direction = tips.setDirection(opts);
                    if (status == "in") {
        the.css({"display":"block"});
        if (direction == "dn"){
         the.css("top",parseInt(the.css("top")) - opts.bubbleDistance);
           the.not(":animated").animate({top: '+='+opts.bubbleDistance+'px'},opts.bubbleSpeed);
        }
        else if (direction == "up"){
         the.css("top",parseInt(the.css("top")) + opts.bubbleDistance);
           the.not(":animated").animate({top: '-='+opts.bubbleDistance+'px'},opts.bubbleSpeed);
        }
        else if (direction == "lt"){
         the.css("left",parseInt(the.css("left")) + opts.bubbleDistance);
           the.not(":animated").animate({left: '-='+opts.bubbleDistance+'px'},opts.bubbleSpeed);
        }
           else {
         the.css("left",parseInt(the.css("left")) - opts.bubbleDistance);
           the.not(":animated").animate({left: '+='+opts.bubbleDistance+'px'},opts.bubbleSpeed);
        }
;                     
                    } else if (status == "out") {
       if (direction == "dn"){
          the.not(":animated").animate({top: '-='+opts.bubbleDistance+'px'},opts.bubbleSpeed,function() {
          the.css("top",parseInt(the.css("top")) + opts.bubbleDistance);
          the.css({"display":"none"});
         });
       }
       else if (direction == "up"){
          the.not(":animated").animate({top: '+='+opts.bubbleDistance+'px'},opts.bubbleSpeed,function() {
             the.css("top",parseInt(the.css("top")) - opts.bubbleDistance);
          the.css({"display":"none"});
         });
       }
       else if (direction == "lt"){
          the.not(":animated").animate({left: '+='+opts.bubbleDistance+'px'},opts.bubbleSpeed,function() {
          the.css("left",parseInt(the.css("left")) - opts.bubbleDistance);
          the.css({"display":"none"});
         });
       }
          else {
          the.not(":animated").animate({left: '-='+opts.bubbleDistance+'px'},opts.bubbleSpeed,function() {
          the.css("left",parseInt(the.css("left")) + opts.bubbleDistance);
          the.css({"display":"none"});
         });
       }
        
                       }
     
                }
     else if(!opts.bubble && !opts.fade) {
                    if (status == "in") {
                        $(this).show();
                    } else if (status == "out") {
                        $(this).hide();
                    }
                }

            });

        }
    }
})(jQuery);
/**
 * 图片头数据加载就绪事件 - 更快获取图片尺寸
 * @version 2011.05.27
 * @author TangBin
 * @see  http://www.planeart.cn/?p=1121
 * @param {String} 图片路径
 * @param {Function} 尺寸就绪
 * @param {Function} 加载完毕 (可选)
 * @param {Function} 加载错误 (可选)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  alert('size ready: width=' + this.width + '; height=' + this.height);
 });
 */
var imgReady = (function () {
 var list = [], intervalId = null,

 // 用来执行队列
 tick = function () {
  var i = 0;
  for (; i < list.length; i++) {
   list[i].end ? list.splice(i--, 1) : list[i]();
  };
  !list.length && stop();
 },

 // 停止所有定时器队列
 stop = function () {
  clearInterval(intervalId);
  intervalId = null;
 };

 return function (url, ready, load, error) {
  var onready, width, height, newWidth, newHeight,
   img = new Image();
  
  img.src = url;

  // 如果图片被缓存，则直接返回缓存数据
  if (img.complete) {
   ready.call(img);
   load && load.call(img);
   return;
  };
  
  width = img.width;
  height = img.height;
  
  // 加载错误后的事件
  img.onerror = function () {
   error && error.call(img);
   onready.end = true;
   img = img.onload = img.onerror = null;
  };
  
  // 图片尺寸就绪
  onready = function () {
   newWidth = img.width;
   newHeight = img.height;
   if (newWidth !== width || newHeight !== height ||
    // 如果图片已经在其他地方加载可使用面积检测
    newWidth * newHeight > 1024
   ) {
    ready.call(img);
    onready.end = true;
   };
  };
  onready();
  
  // 完全加载完毕的事件
  img.onload = function () {
   // onload在定时器时间差范围内可能比onready快
   // 这里进行检查并保证onready优先执行
   !onready.end && onready();
  
   load && load.call(img);
   
   // IE gif动画会循环执行onload，置空onload即可
   img = img.onload = img.onerror = null;
  };

  // 加入队列中定期执行
  if (!onready.end) {
   list.push(onready);
   // 无论何时只允许出现一个定时器，减少浏览器性能损耗
   if (intervalId === null) intervalId = setInterval(tick, 40);
  };
 };
})();

 

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery tips - 你可以为各种标签用各种选择器创建相对应的信息提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="tips/c/base.css">
<link rel="stylesheet" href="css/document.css">
<script type="text/javascript" src="tips/j/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="tips/j/jquery.tips.js"></script>
</script><script type="text/javascript">
$(function(){
  $('.text, .button, .link, li, p.paragraph, #myimage1, #myimage2').tips({content:"先来看看这个页面的HTML源代码学习这个插件是如何工作的"});
  $('input').tips({content:"先来看看这个页面的HTML源代码学习这个插件是如何工作的",alignY:"center",alignX:"right",offsetX:15});
       $('.link2').tips();
  $('#img').tips({img:'http://aspic.qpdiy.com/system_statics/i/logoBF.png'});

});
</script>
</head>
<body>
<div class="page">
 <div class="header">
   <h1>jQuery tips</h1>
   <h2>你可以使用很少的代码为各种标签用各种选择器创建相对应的信息提示框</h2>
 </div>
 <div class="content">
  <br />
  <br />
  <br />
  <table style="border-collapse:separate;border-spacing:30px;">
   <tbody>
    <tr>
                    <td><input type="text" style="border:1px solid #000; padding:8px 0" value="这是一个input框" /></td>
                   
     <td> <span class="text"> 这是一个 &lt;SPAN&gt; 标签内的文本</span></td>
     <td><div class="button">这是一个 &lt;DIV&gt; 标签</div></td>
     <td><a class="link" href="#null">这是一个超链接设定了content内容</a><br /><br /><br /><br /><br /><br /><a class="link2" title="这里是title的内容插件自动设置title的内容为信息提示框的内容" href="#null">这是一个超链接没设定了content内容但是设定了title值</a></td>
    </tr>
    <tr>
     <td><ul><li> 这是一个在 &lt;LI&gt; 标签内的文本</li><li> 这是一个在 &lt;LI&gt; 标签内的文本</li><li> 这是一个在 &lt;LI&gt; 标签内的文本</li></ul></td>
     <td><p class="paragraph">这是一个 &lt;P&gt; 标签</p></td>
     <td>
      <div id="myimage1"><img src="images/image.jpg" /></div>
      <br />
      <br />
                     
                         <br />
                         <br />
                         <br />
                         <br />
      <img id="myimage2" src="images/image.jpg" style="width:186px; height:40px" />
     </td>
    </tr>
    <tr>
     <td colspan="3"><div id="img">这里很多很多很多内容</div><br /><br /><br /><strong>来看看这个页面的HTML源代码，学习的插件是如何工作的！</strong></td>
    </tr>
   </tbody>
  </table>
 </div>
 <div class="footer">
  <p><a href="http://www.ued100.com/tips">jQuery Tips</a> &copy; 2011 LYuShine</p>
 </div>
</div>
</body>
</html>