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 [[email protected]]
// 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 = $('').html('