Your jquery tip box (tip) Plugin _javascript tips

Plug-ins can meet the common prompts display, support 12 directions, support borders, background color, text color customization, support position fine-tuning, level fine-tuning, width spacing, and other parameter adjustment.

First look at the effect:

Tips: Informational Components
Parameters:

• msg: ' ASDF ', content
  
• Dire:2, direction
  
• w:250, Width
  
• _x:0, lateral offset
  
• _y:0, longitudinal offset
  
• zindex:100000, Level
  
• BorderColor: #FFF, Border color
  
• bgcolor: #FFF, background color
  
• Usehover:true whether to use suspension display
  
• Color: Default hint text colors
  
• padding: Margins
  

JavaScript code:

(function ($) {var defaults = {dire:12, w:250, _x:0, _y:0, bordercolor: ' #FFBB76 ', Bgcolo
  R: ' #FFFCEF ', color: ' #FF0000 ', padding: [5, ten], Arrwidth:10, Usehover:true, zindex:100000};
    $.fn.tips = function (opt) {var tip, opts = $.extend ({}, defaults, opt);
      if (This[0]) {Opts.tag = this;
          if (opts.usehover) {opts.tag.hover (function () {tip = new tip (opts);
        Tip.show ();
        }, Function () {tip.close ();
      });
        else {tip = new tip (opts);
      Tip.show ();
    return to this;
  }
  };
    function Tip (opts) {this.dire = Opts.dire;
    This.width = OPTS.W;
    This.zindex = Opts.zindex;
    This.bordercolor = Opts.bordercolor;
    This.bgcolor = Opts.bgcolor;
    This.color = Opts.color;
    this.padding = opts.padding;
    This.arrwidth = Opts.arrwidth;
    This.offsetx = opts._x;
    This.offsety = opts._y; This.tag = Opts.tag;
    This.msg = opts.msg;
    This.wrap = $ (' <div class= ' tip-wrap ' ></div> ');
    This.innerarr = $ (' <div class= ' tip-arr-a ' ></div> ');
    This.outerarr = $ (' <div class= ' tip-arr-b ' ></div> ');
  This.init ();
  };
      Tip.prototype = {init:function () {var msg = this.tag.data (' tipmsg ');
      if (!this.msg) {this.msg = msg;
    } this.createtemp ();
      }, Createtemp:function () {var t = this;
      T.createwrap ();
    T.setposition ();
      }, Createwrap:function () {var t = this;
      T.wrap.html (T.MSG);
        var wrapcss = {width:t.width, border: ' 1px solid ' + t.bordercolor, ' Border-radius ': ' 5px ',
      Background:t.bgcolor, Color:t.color, padding:t.getpadding ()};
      T.outerarr.css (T.getarrstyle (T.dire, T.arrwidth, T.bordercolor));
      T.innerarr.css (T.getarrstyle (T.dire, T.arrwidth, T.bgcolor)); T.wrap.prepend (T.innerarr). prepend (T.Outerarr). CSS (WRAPCSS);
    $ (' body '). Append (T.wrap);
      }, Setposition:function () {var t = this; var posobj = T.getpos (T.dire, T.getposition (T.tag), T.getposition (T.wrap), t.arrwidth), pos = posobj.pos, InnerPos = posOb
      J.innerpos, outerpos = Posobj.outerpos;
      T.wrap.css ({top:pos.y, left:pos.x});
      T.innerarr.css ({top:innerpos.y, left:innerpos.x});
    T.outerarr.css ({top:outerpos.y, left:outerpos.x});
      }, Getpadding:function () {var t = this, pad = ' 0px ', Padarr = t.padding, len = padarr.length;
          Switch (len) {case 1:pad = padarr[0] + ' px ';
        Break
          Case 2:pad = padarr[0] + ' px ' + padarr[1] + ' px ';
        Break
          Case 3:pad = padarr[0] + ' px ' + padarr[1] + ' px ' + padarr[2] + ' px ';
        Break
          Case 4:pad = padarr[0] + ' px ' + padarr[1] + ' px ' + padarr[2] + ' px ' + padarr[3] + ' px ';
      Break
    } return pad;
  },  Getposition:function (tag) {return {T:tag.offset (). Top, L:tag.offset (), H:tag.outerheight (), W:tag.oute
    Rwidth ()};
      }, Getarrstyle:function (dir, width, color) {var style; Switch (dir) {case 11:case 12:case 1:style = {' Border-bottom-style ': ' s
          Olid ', ' border-width ': ' 0px ' + width + ' px ' + width + ' px ', ' border-bottom-color ': color
          };
        Break Case 2:case 3:case 4:style = {' Border-left-style ': ' Solid ', ' border-
          Width ': width + ' px 0px ' + width + ' px ' + width + ' px ', ' border-left-color ': color};
        Break Case 5:case 6:case 7:style = {' Border-top-style ': ' Solid ', ' border-w
          Idth ': Width + ' px ' + width + ' px 0px ', ' border-top-color ': color};
        Break Case 8:CASe 9:case 10:style = {' Border-right-style ': ' Solid ', ' border-width ': Width +
          ' px ' + width + ' px ' + width + ' px 0px ', ' border-right-color ': color};
      Break } Return Style | |
    {};  }, Getpos:function (d, Tagpos, POS, arrwidth) {var _pos, _innerpos, _outerpos, L = tagpos.l, t = tagpos.t, W =
      TAGPOS.W, H = tagPos.h, ww = pos.w, hh = pos.h; Switch (d) {case 0:case 1: _pos = {x:l + W/2 + arrwidth + + 1-WW, y:t + H + arrwidth}
          ;
          _outerpos = {x:ww-2-20-arrwidth * 2, y:-arrwidth};
          _innerpos = {x:ww-2-20-arrwidth * 2, Y:-arrwidth + 1};
        Break
          Case 2: _pos = {x:l-ww-arrwidth, Y:t + H/2-arrwidth-20-1};
          _outerpos = {x:ww-2, y:20};
          _innerpos = {x:ww-2-1, y:20};
        Break Case 3: _pos = {x:l-ww-arrwidth, Y:t + H/2-HH/2};
          _outerpos = {x:ww-2, y: (hh-2)/2-arrwidth};
          _innerpos = {x:ww-2-1, y: (hh-2)/2-arrwidth};
        Break
          Case 4: _pos = {x:l-ww-arrwidth, y:t + h/2 + arrwidth + 1-hh};
          _outerpos = {x:ww-2, y:hh-2-20-arrwidth * 2};
          _innerpos = {x:ww-2-1, y:hh-2-20-arrwidth * 2};
        Break
          Case 5: _pos = {x:l + W/2 + arrwidth + 1-ww, y:t-arrwidth-hh};
          _outerpos = {x:ww-2-20-arrwidth * 2, y:hh-2};
          _innerpos = {x:ww-2-20-arrwidth * 2, y:hh-2-1};
        Break
          Case 6: _pos = {x:l + W/2-WW/2, Y:t-arrwidth-hh};
          _outerpos = {x: (ww-2)/2-arrwidth, y:hh-2};
          _innerpos = {x: (ww-2)/2-arrwidth, y:hh-2-1};
        Break
          Case 7: _pos = {x:l + W/2-20-arrwidth, Y:t-arrwidth-hh}; _outerpos = {x:20, y:Hh-2};
          _innerpos = {x:20, y:hh-2-1};
        Break
          Case 8: _pos = {x:l + W + arrwidth, Y:t + H/2 + arrwidth + + 1-hh};
          _outerpos = {x:-arrwidth, Y:hh-2-20-arrwidth * 2};
          _innerpos = {x:-arrwidth + 1, y:hh-2-20-arrwidth * 2};
        Break
          Case 9: _pos = {x:l + W + arrwidth, Y:t + H/2-HH/2};
          _outerpos = {x:-arrwidth, y: (hh-2)/2-arrwidth};
          _innerpos = {x:-arrwidth + 1, y: (hh-2)/2-arrwidth};
        Break
          Case: _pos = {x:l + W + arrwidth, Y:t + H/2-arrwidth-20-1};
          _outerpos = {x:-arrwidth, y:20};
          _innerpos = {x:-arrwidth + 1, y:20};
        Break
          Case One: _pos = {x:l + W/2-20-arrwidth, y:t + H + arrwidth};
          _outerpos = {x:20, y:-arrwidth};
          _innerpos = {x:20, y:-arrwidth + 1};
        Break Case: _pos = {x:l +W/2-WW/2, y:t + H + arrwidth};
          _outerpos = {x: (ww-2)/2-arrwidth, y:-arrwidth};
          _innerpos = {x: (ww-2)/2-arrwidth, Y:-arrwidth + 1};
        Break
      Default: _pos = {x:0, y:0};
    return {pos: _pos, Innerpos: _innerpos, Outerpos: _outerpos};
    }, Show:function () {this.wrap.show ();
    }, Close:function () {this.wrap.remove ();
}
  }; }) (JQuery);

Css:

. tip-wrap {
  position:absolute;
  Display:none
}

. Tip-arr-a,. tip-arr-b {
  position:absolute;
  width:0;
  height:0;
  line-height:0;
  border-style:dashed;
  border-color:transparent;
}
Page:

<div class= "Test" > <span data-tip-msg= "I am the test data <br> I am the test data
  <br> I am the test data" > I am the test data </span>
</div>

<script>
  $ ('. Test span '). Tips ();
</script>

Effect:

The above is a simple jquery tip box (tip) Plug-ins, I hope you can apply to their own projects, some harvest.