tooltip提示信息插件
原理：定位元素在页面中的位置即坐标信息，将显示节点元素插入到body中绝对应为到相应位置，显示内容从指定元素的属性(dataMess)中获取或者通过设置获取。
使用方法：
$("#test").iTooltip({"posType":"top"});
<div id="test" class="test" dataMess="测试数据中。。。<br/>测试数据中。。。">测试</div>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>tooltip提示插件</title>
<style>.iTooltipMes{
position: absolute;
display: block;
color: #000;
font-size: 12px;
padding: 10px;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
z-index: 999999;
}
.iToolTri{
position: absolute;
z-index: 1;
display: block;
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
border: 8px solid #999999;
}
.iToolTri i{
position: absolute;
z-index: 1;
display: block;
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
border: 6px solid #ffffff;
}
.iToolTriTop{
left: 50%;
bottom: -16px;
margin-left: -8px;
border-color: #999999 transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.iToolTriTop i{
left: -6px;
bottom: -4px;
border-color: #ffffff transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.iToolTriBtm{
left: 50%;
top: -16px;
margin-left: -8px;
border-color: transparent transparent #999999 transparent;
border-style: dashed dashed solid dashed;
}
.iToolTriBtm i{
left: -6px;
top: -4px;
border-color: transparent transparent #ffffff transparent;
border-style: dashed dashed solid dashed;
}
.iToolTriRt{
left: -16px;
top: 50%;
margin-top: -8px;
border-color: transparent #999999 transparent transparent ;
border-style: dashed solid dashed dashed ;
}
.iToolTriRt i{
left: -4px;
top: -6px;
border-color: transparent #ffffff transparent transparent;
border-style: dashed solid dashed dashed;
}
.iToolTriLt{
right: -16px;
top: 50%;
margin-top: -8px;
border-color: transparent transparent transparent #999999;
border-style: dashed dashed dashed solid;
}
.iToolTriLt i{
right: -4px;
top: -6px;
border-color: transparent transparent transparent #ffffff;
border-style: dashed dashed dashed solid;
}
.animated {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
</style>
<script src=”http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js”></script>
<style >
*{margin: 0px;padding: 0px;}
body{position: relative;height: 1500px; font-size: 14px; }
.test{position: absolute; width: 100px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #f0f; cursor: pointer;}
.left{ left: 10px; top: 10px;}
.top{ left: 50%; top: 10px; margin-left: -50px;}
.right{right: 10px; top: 10px;}
.bottom{left: 50%; bottom: 10px; margin-left: -50px;}
.center{left: 50%; top: 50%; margin-left: -50px; margin-top: -15px;}
</style>
</head>
<body>
<div id=”left” class=”test left” dataMess=”测试数据中。。。<br/>测试数据中。。。”>测试左</div>
<div id=”top” class=”test top” dataMess=”测试数据中。。。<br/>测试数据中。。。”>测试上</div>
<div id=”right” class=”test right” dataMess=”测试数据中。。。<br/>测试数据中。。。”>测试右</div>
<div id=”bottom” class=”test bottom” dataMess=”测试数据中。。。<br/>测试数据中。。。”>测试下</div>
<div id=”center” class=”test center” dataMess=”http://www.cnblogs.com/kuikui<br/>测试数据中。。。”>测试中</div>
<script>(function($, window, document) {
var pluginName = “iTooltip”,
defaults = {
addClass: “”,
dataMess: “”,
posType: “top” // [left|top|right|bottom]
};
function Plugin(element, options) {
var options = $.extend({}, defaults, options);
this.opts = options;
this.$elem = element;
this.elem = element.selector;
this.anis = {top:”fadeInDown”,right:”fadeInLeft”,bottom:”fadeInUp”,left:”fadeInRight”};
this.tris = {top:”iToolTriTop”,right:”iToolTriRt”,bottom:”iToolTriBtm”,left:”iToolTriLt”};
this.isOk = true;
this.tmpPosType = null;
this.init();
};
Plugin.prototype = {
init: function() {
var _this = this;
$(document).on(“mouseover”, _this.elem, function() {
var $this = $(this);
if (_this.isOk) {
_this.isOk = false;
_this.setShow($this);
}
});
$(document).on(“mouseout”, _this.elem, function() {
if(!_this.isOk){
_this.isOk = true;
_this.tmpPosType = _this.opts.posType;
$(“.iTooltipMes”).remove();
}
});
},
setShow: function(obj) {
var _this = this;
var l = obj.offset().left;
var t = obj.offset().top;
var w = obj.width();
var h = obj.height();
var mess = _this.opts.dataMess || obj.attr(“dataMess”);
var tmpHtml = “<div class=’iTooltipMes animated’>” + mess + “<i class=’iToolTri’><i></i></i></div>”;
$(“body”).append(tmpHtml);
var iTooltipMes = $(“.iTooltipMes”);
var ow = iTooltipMes.outerWidth();
var oh = iTooltipMes.outerHeight();
var tmpt = 0;
var tmpl = 0;
var distance = 10;
var win = $(window);
var winW = win.width();
var winH = win.height();
var winTop = win.scrollTop();
if( t < (h + distance + winTop) && _this.opts.posType ===”top”){
_this.tmpPosType = “bottom”;
}
if((l+w+ow > winW) && _this.opts.posType ===”right”){
_this.tmpPosType = “left”;
}
if((l< ow ) && _this.opts.posType ===”left”){
_this.tmpPosType = “right”;
}
if( ((t – winH + oh) > winTop) && _this.opts.posType ===”bottom”){
_this.tmpPosType = “top”;
}
_this.tmpPosType = _this.tmpPosType || _this.opts.posType;
switch(_this.tmpPosType){
case “top”:
tmpt = t – oh – distance;
tmpl = l + ((w-ow)/2);
break;
case “right”:
tmpt = t – ((oh-h)/2) ;
tmpl = l + w + distance;
break;
case “bottom”:
tmpt = t + h + distance;
tmpl = l + ((w-ow)/2);
break;
case “left”:
tmpt = t – ((oh-h)/2);
tmpl = l – ow – distance;
break;
default:
break;
}
if(!!_this.opts.addClass){
iTooltipMes.addClass(_this.opts.addClass);
}
iTooltipMes.addClass(_this.anis[_this.tmpPosType]).css({
left: tmpl + “px”,
top: tmpt + “px”
}).find(“.iToolTri”).addClass(_this.tris[_this.tmpPosType]);
}
};
$.fn[pluginName] = function() {
var args = arguments;
if(!$(this).selector){
return;
}
$(this).data(“iTooltip”, new Plugin(this, args[0]));
}
})(jQuery, window, document);</script>
<script type=”text/javascript”>
$(“#left”).iTooltip({ “posType”:”right”});
$(“#top”).iTooltip({ “posType”:”bottom”});
$(“#right”).iTooltip({ “posType”:”left”});
$(“#bottom”).iTooltip({ “posType”:”top”});
$(“#center”).iTooltip({ “posType”:”top”});
</script>
</body>
</html>
运行代码
