jquery-tips悬浮提示插件分享

/*** jquery tips 提示插件 jquery.tips.js v0.1beta** 使用方法* $(selector).tips({  //selector 为jquery选择器* msg:'your messages!',  //你的提示消息 必填* side:1, //提示窗显示位置 1，2，3，4 分别代表 上右下左 默认为1（上） 可选* color:'#FFF', //提示文字色 默认为白色 可选* bg:'#F00',//提示窗背景色 默认为红色 可选* time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选* x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选* y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选* })***/(function ($) {  $.fn.tips = function(options){    var defaults = {      side:1,      msg:'',      color:'#FFF',      bg:'#F00',      time:2,      x:0,      y:0    }    var options = $.extend(defaults, options);    if (!options.msg||isNaN(options.side)) {    throw new Error('params error');  }  if(!$('#jquery_tips_style').length){    var style='<style id="jquery_tips_style" type="text/css">';    style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';    style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';    style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';    style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';    style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';    style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';    style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';    style+='</style>';    $(document.body).append(style);  }    this.each(function(){      var element=$(this);      var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();      options.side=options.side<1?1:options.side>4?4:Math.round(options.side);      var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';      var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);      tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);      tips.find('.jq_tips_info').css({        color:options.color,        backgroundColor:options.bg      });      switch(options.side){        case 1:          tips.css({            top:element_top-tips.outerHeight()+options.x,            left:element_left-10+options.y          });          break;        case 2:          tips.css({            top:element_top-20+options.x,            left:element_left+element_width+options.y          });          break;        case 3:          tips.css({            top:element_top+element_height+options.x,            left:element_left-10+options.y          });          break;        case 4:          tips.css({            top:element_top-20+options.x,            left:element_left-tips.outerWidth()+options.y          });          break;        default:      }      var closeTime;      tips.fadeIn('fast').click(function(){        clearTimeout(closeTime);        tips.fadeOut('fast',function(){          tips.remove();        })      })      if(options.time){        closeTime=setTimeout(function(){          tips.click();        },options.time*1000);        tips.hover(function(){          clearTimeout(closeTime);        },function(){          closeTime=setTimeout(function(){            tips.click();          },options.time*1000);        })      }    });    return this;  };})(jQuery);