tipsy源码解读

CSS

.tipsy { padding: 5px; font-size: 13px; position: absolute;z-index:112}
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 250px; text-align: left; }
.tipsy-inner { /*border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;*/overflow:hidden; }
.tipsy-arrow { position: absolute; background: url(/public/images/tipsy/black.gif) no-repeat top left; width: 9px; height: 0px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

.tipsy-red { padding: 5px; font-size: 12px; position: absolute;;z-index:112}
.tipsy-red .tipsy-inner {/* background: #fff url(/public/images/tipsy/gan.png) no-repeat 14px 8px ;border:#f7bf8d solid 1px; padding:5px 8px 4px 30px;background: #fff;*/background-color:#FFF;color:#ff0000;}
.tipsy-red .tipsy-arrow { /* background: url(/public/images/tipsy/red.gif) no-repeat top left; */  background:none;}
.tipsy-red-n .tipsy-arrow { top: 1px; left: 50%; margin-left: -4px; }
.tipsy-red-nw .tipsy-arrow { top: 1px; left: 10px; }
.tipsy-red-ne .tipsy-arrow { top: 1px; right: 10px; }
.tipsy-red-s .tipsy-arrow { bottom: 1px; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-red-sw .tipsy-arrow { bottom: 1px; left: 10px; background-position: bottom left; }
.tipsy-red-se .tipsy-arrow { bottom: 1px; right: 10px; background-position: bottom left; }
.tipsy-red-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 1px; width: 5px; height: 9px; background-position: top right; }
.tipsy-red-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 1px; width: 5px; height: 9px; }

.tipsy-white { padding: 5px; font-size: 13px; position: absolute;;z-index:112}/* z-index: 10000;*/
.tipsy-white .tipsy-inner { background-color: #ffffff; border:1px solid black;color: black;text-align: left; max-width: 600px;}
.tipsy-white .tipsy-arrow { background: url(/public/images/tipsy/white.gif) no-repeat top left; }
.tipsy-white-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-white-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-white-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-white-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-white-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-white-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-white-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-white-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

.textMess.textMess_bd,.textMess_bd{border:#dddddd solid 1px;}

/*131030*/
.extra_tips .caution,.ico_correct,.ico_wrong,.code_wrong,.code_right{background:url(/public/images/tipsy/tipsBg.png) no-repeat;}
.extra_tips{margin-left:8px;_zoom:1;padding-left:15px;vertical-align:middle;display:none;}
.extra_tips .caution{width:16px;height:16px;display:inline-block;margin-left:-15px;margin-right:5px;background-position:0 -60px;vertical-align:middle;}
.extra_tips .text{line-height:18px;color:#B5B5B5;display:inline-block;vertical-align:middle;}
.ico_wrong{width:14px;height:15px;display:inline-block;margin-left:8px;vertical-align:middle;}
.ico_correct{background-position:-1px -30px;}
.ico_wrong{background-position:0 0;width:15px;}

JS

/**
 * 信息提示
 * @param  {[type]} require [description]
 * @param  {[type]} exports [description]
 * @param  {[type]} module  [description]
 * @return {[type]}         [description]
 */
define(function(require, exports, module) {
  require.async('./tipsy.css');

  // tipsy, facebook style tooltips for jquery
  // version 1.0.0a
  // (c) 2008-2010 jason frame [jason@onehackoranother.com]
  // releated under the MIT license

  (function($) {

    function fixTitle($ele) {
      if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
        $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
      }
    }

    function Tipsy(element, options) {
      this.$element = $(element);
      this.options = options;
      this.enabled = true;
      fixTitle(this.$element);
    }

    Tipsy.prototype = {
      show: function() {
        var title = this.getTitle();
        if (title && this.enabled) {
          var $tip = this.tip();
          $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
          var color = this.options.color != "" ? "-" + this.options.color : "";
          $tip[0].className = 'tipsy' + color; // reset classname in case of dynamic gravity
          $tip.remove().css({
            top: 0,
            left: 0,
            visibility: 'hidden',
            display: 'block'
          }).appendTo(document.body);

          var pos = $.extend({}, this.$element.offset(), {
            width: this.$element[0].offsetWidth,
            height: this.$element[0].offsetHeight
          });

          var actualWidth = $tip[0].offsetWidth,
            actualHeight = $tip[0].offsetHeight;
          var gravity = (typeof this.options.gravity == 'function') ? this.options.gravity.call(this.$element[0]) : this.options.gravity;

          var tp;
          switch (gravity.charAt(0)) {
            case 'n':
              tp = {
                top: pos.top + pos.height + this.options.offset,
                left: pos.left + pos.width / 2 - actualWidth / 2
              };
              break;
            case 's':
              tp = {
                top: pos.top - actualHeight - this.options.offset,
                left: pos.left + pos.width / 2 - actualWidth / 2
              };
              break;
            case 'e':
              tp = {
                top: pos.top + pos.height / 2 - actualHeight / 2,
                left: pos.left - actualWidth - this.options.offset
              };
              break;
            case 'w':
              tp = {
                top: pos.top + pos.height / 2 - actualHeight / 2,
                left: pos.left + pos.width + this.options.offset
              };
              break;
          }

          if (gravity.length == 2) {
            if (gravity.charAt(1) == 'w') {
              tp.left = pos.left + pos.width / 2 - 15;
            } else {
              tp.left = pos.left + pos.width / 2 - actualWidth + 15;
            }
          }

          var color = this.options.color != "" ? "-" + this.options.color : "";
          $tip.css(tp).addClass('tipsy' + color + '-' + gravity);

          if (this.options.fade) {
            $tip.stop().css({
              opacity: 0,
              display: 'block',
              visibility: 'visible'
            }).animate({
              opacity: this.options.opacity
            });
          } else {
            $tip.css({
              visibility: 'visible',
              opacity: this.options.opacity
            });
          }

          var highestZIndex = upgTool.getHighestZIndex();

          // moving_tab_main
          if ($("#moving_tab_main").is(":visible")) {
            $tip.css({
              "position": "fixed"
            });
          }

          $tip.css({
            "zIndex": highestZIndex
          });
        }
      },

      hide: function() {
        this.tip().remove();
        /* no fadeout animation when hidding
            if (this.options.fade) {
                this.tip().stop().fadeOut(function() { $(this).remove(); });
            } else {
                this.tip().remove();
            }
            */
      },

      getTitle: function() {
        var title, $e = this.$element,
          o = this.options;
        fixTitle($e);
        var title, o = this.options;
        if (typeof o.title == 'string') {
          title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
        } else if (typeof o.title == 'function') {
          title = o.title.call($e[0]);
        }
        title = ('' + title).replace(/(^\s*|\s*$)/, "");
        return title || o.fallback;
      },

      tip: function() {
        if (!this.$tip) {
          var color = this.options.color != "" ? "-" + this.options.color : "";
          var id = this.options.id == "" ? "" : " tipsyid='" + this.options.id + "'";
          var formId = this.options.formId == "" ? "" : " tipsyformId='" + this.options.formId + "'";
          var width = this.options.width || 'auto';
          this.$tip = $('<div tipsy="true" style="width:' + width + '" class="tipsy' + color + '"' + id + formId + '></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
        }
        return this.$tip;
      },

      validate: function() {
        if (!this.$element[0].parentNode) {
          this.hide();
          this.$element = null;
          this.options = null;
        }
      },

      enable: function() {
        this.enabled = true;
      },
      disable: function() {
        this.enabled = false;
      },
      toggleEnabled: function() {
        this.enabled = !this.enabled;
      }
    };

    $.fn.tipsy = function(options) {

      if (options === true) {
        return this.data('tipsy');
      } else if (typeof options == 'string') {
        return this.data('tipsy')[options]();
      }

      options = $.extend({}, $.fn.tipsy.defaults, options);

      function get(ele) {
        var tipsy = $.data(ele, 'tipsy');
        if (!tipsy) {
          tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
          $.data(ele, 'tipsy', tipsy);
        }
        return tipsy;
      }

      function enter() {
        var tipsy = get(this);
        tipsy.hoverState = 'in';
        if (options.delayIn == 0) {
          tipsy.show();
        } else {
          setTimeout(function() {
            if (tipsy.hoverState == 'in') tipsy.show();
          }, options.delayIn);
        }
      };

      function leave() {
        var tipsy = get(this);
        tipsy.hoverState = 'out';
        if (options.delayOut == 0) {
          tipsy.hide();
        } else {
          setTimeout(function() {
            if (tipsy.hoverState == 'out') tipsy.hide();
          }, options.delayOut);
        }
      };

      if (!options.live) this.each(function() {
        get(this);
      });

      if (options.trigger != 'manual') {
        var binder = options.live ? 'live' : 'bind',
          eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
          eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
        this[binder](eventIn, enter)[binder](eventOut, leave);
      }

      return this;

    };

    $.fn.tipsy.defaults = {
      delayIn: 0,
      delayOut: 0,
      fade: false,
      fallback: '',
      gravity: 'n',
      html: false,
      live: false,
      offset: 0,
      opacity: 0.8,
      title: 'title',
      trigger: 'hover',
      color: ''
    };

    // Overwrite this method to provide options on a per-element basis.
    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
    // (remember - do not modify 'options' in place!)
    $.fn.tipsy.elementOptions = function(ele, options) {
      return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };

    $.fn.tipsy.autoNS = function() {
      return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
    };

    $.fn.tipsy.autoWE = function() {
      return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
    };

    var resizeTip = function() {
      $("[valid-msg-text]").each(function() {
        if ($(this).is(":visible")) {
          try {
            var $tip = $(this).tipsy("tip");
            if ($tip.is(":visible")) {
              $(this).tipsy("show");
            }
          } catch (e) {}
        }
      });
    };

    var timer = 0;

    $(window).bind("resize.tipsy,scroll.tipsy", function() {
      if (timer) {
        clearTimeout(timer);
        timer = 0;
      }
      timer = setTimeout(resizeTip, 50)
    });

    $(document).ajaxComplete(function() {
      $('.jqueryscroll, .benchviewDivs').scroll(function() {
        if (timer) {
          clearTimeout(timer);
          timer = 0;
        }
        timer = setTimeout(resizeTip, 50)
      });
    });
  })(jQuery);
});