Your jQuery Tip plug-in, jquerytip

Your jQuery Tip plug-in, jquerytip

The plug-in allows you to display frequently-used prompts in 12 directions, customize borders, background colors, text colors, and adjust parameters such as position fine-tuning, hierarchical fine-tuning, and width spacing.

First look at the effect:

Tips: prompt information component
Parameters:

• Msg: 'asdf ', content
  
• Dire: 2, Direction
  
• W: 250, width
  
• _ X: 0, horizontal offset
  
• _ Y: 0, vertical offset
  
• ZIndex: 100000, Level
  
• BorderColor: # FFF, border color
  
• BgColor: # FFF, background color
  
• UseHover: true whether to use floating display
  
• Color: the default text color.
  
• Padding: margin
  

Javascript code:

(function ($) {  var defaults = {    dire: 12,    w: 250,    _x: 0,    _y: 0,    borderColor: '#FFBB76',    bgColor: '#FFFCEF',    color: '#FF0000',    padding: [5, 10],    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 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 = posObj.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().left, h: tag.outerHeight(), w: tag.outerWidth()};    },    getArrStyle: function (dir, width, color) {      var style;      switch (dir) {        case 11:        case 12:        case 1:          style = {            'border-bottom-style': 'solid',            '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-width': 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 + 20 + 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 + 20 + 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 + 20 + 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 + 20 + 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 10:          _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 11:          _pos = {x: l + w / 2 - 20 - arrWidth, y: t + h + arrWidth};          _outerPos = {x: 20, y: -arrWidth};          _innerPos = {x: 20, y: -arrWidth + 1};          break;        case 12:          _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-,. 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'm test data <br> I'm test data"> I'm test data </span> </div> <script> $ ('. test span '). tips (); </script>

Effect:

The above is a simple jQuery prompt box (Tip) plug-in. I hope you can apply it to your project for some gains.

Articles you may be interested in:

• Tooltip of jquery tools
• Jquery Tooltip plug-in qtip instructions
• JQuery Tips: Method for passing additional parameters for AJAX callback Functions
• QTip2 exquisite jQuery-based prompt information plug-in
• JQuery Tools tooltip instructions
• Use the tooltip function of jQuery UI to modify the Bubble Floating Box of the title attribute
• Example of sliding in and out of TIPS on the left side of JQUERY
• JQuery tooltips plug-in collection with arrow prompt box
• Compile your own jQuery Tip plug-in