jquery-tips悬浮提示插件分享

由于是在mac下写的，没什么低版本浏览器测试工具没做具体的兼容测试，而且我也不是前端还请多多包涵，js库用的jquery1.11.1，低版本应该也是可以的，需要自己去下jquery，只是写的好玩，分享一下，希望大家能一起改进

(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+='.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+='';
    $(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=$(''+options.msg+'').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);

以上所述就是本文的全部内容了，希望大家能够喜欢。