自动匹配显示位置的提示框--Auto_Tooltip

最近工作中需要用到提示框（ToolTip） 在网上找了很多插件 不是兼容性不好就是不能自动匹配显示位置等问题。遂自己开发了一个简单易用的提示框。

这是一个简单的提示框插件 欢迎大神们指导。也欢迎童鞋们丰富出更加炫酷的样式更加牛叉的功能！！！

一 、特点：

1、不存在兼容性问题 能兼容最低版本的IE。

2、自动匹配显示位置。

3、轻量级，简单易用。

示例：

<a href="#none" onclick="Tooltip(this,'this is a toolTip',300,100)">rightBottom</a>

参数详解：

this–>当前元素 ‘this is toolTip’–>提示框的显示内容（string类型）

300–>提示框的宽度（我这里设置的最大宽度为200 参数大于200时自动转为200）

100–>提示框的高度（最小为高度为40）

二 、此插件的设计思路：

提示框的显示方向一共8个（top、left、bottom、right 、leftTop、rightTop、leftBottom、rightBottom）

三 、怎么判断具体显示在哪个方向：

例：top

if(topDis >= height && leftDis >= tipWidth/2 && rightDis >= tipWidth/2 ){                   //在上方显示

console.log("top");

showTop(current,width,height,content);

}

如果 当前元素的距窗口上方的高度（topDis）大于提示框的高度（height） && 距离窗口左边的距离（leftDis）大于提示框宽度的一半（tipWidth/2） && 距离窗口右边的距离（rightDis）大于提示框宽度的一半（tipWidth/2 ） 就显示在上方。

其他方向请参考此例自行理解。

四 、核心js代码：

function showTop (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,     // 这里一定要先toggle再给定义样式 不然提示框第一次出现的时候没有宽高
"left": $(current).offset().left - ($(".toolTip").width()/2 - $(current).width()/2),
"top": $(current).offset().top - height - 2
});
tipContent (content)
};
function showBottom (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left - ($(".toolTip").width()/2 - $(current).width()/2),
"top": $(current).offset().top + $(current).height() + 2
});
tipContent (content)
};
function showLeft (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left - width - 6,
"top": $(current).offset().top - height/2 + $(current).height() / 2
});
tipContent (content)
};
function showRight (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left + $(current).width() + 5,
"top": $(current).offset().top - height/2 + $(current).height() / 2
});
tipContent (content)
};
function rightTop (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left + $(current).width(),
"top": $(current).offset().top - height
});
tipContent (content)
};
function leftTop (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left - $(".toolTip").width(),
"top": $(current).offset().top - height
});
tipContent (content)
};
function leftBottom (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left - $(".toolTip").width(),
"top": $(current).offset().top + $(current).height()
});
tipContent (content)
};
function rightBottom (current,width,height,content){
$(".toolTip").toggle().css({"width":width,"height":height,
"left": $(current).offset().left + $(current).width(),
"top": $(current).offset().top + $(current).height()
});
tipContent (content)
}
function tipContent (content){
//先清空再赋值
$(".tipContent").html("");
$(".tipContent").html(content);
};

function Tooltip(current,content,width,height){
if(width > 200){
width = 200;
alert("最大宽度为200，已自动修改为200");
}
if(height < 40){
height = 40;
alert("最小高度为40，已自动修改为40");
}
// 首先给提示框的宽高赋值 方便以后调用
$(".toolTip").css({"width":width +'px',"height":height +'px'});
// 计算当前元素相对于窗口 上下左右的距离
var leftDis = $(current).offset().left - $(document).scrollLeft();
var rightDis = $(window).width() - leftDis - $(current).width();
var topDis = $(current).offset().top - $(document).scrollTop();
var bottomDis = $(window).height() - topDis - $(current).height();

var tipWidth = parseInt($(".toolTip").css("width"));
var tipHeight = parseInt($(".toolTip").css("height"));

if(topDis >= height && leftDis >= tipWidth/2 && rightDis >= tipWidth/2 ){                   //在上方显示
console.log("top");
showTop(current,width,height,content);
}else if(bottomDis >= height && leftDis >= tipWidth/2 && rightDis >= tipWidth/2){           // 在下方显示
console.log("bottom");
showBottom(current,width,height,content);
}else if(leftDis >= width && topDis >= tipHeight/2 && bottomDis >= tipHeight/2 ){           // 在左边显示
console.log("left");
showLeft(current,width,height,content);
}else if(rightDis >= width && topDis >= tipHeight/2 && bottomDis >= tipHeight/2 ){          // 在右边显示
console.log("right");
showRight(current,width,height,content);
}else if(topDis >= height && leftDis < tipWidth/2 && rightDis >= tipWidth){                 // 在右上方显示
console.log("rightTop");
rightTop(current,width,height,content);
}else if(topDis >= height && leftDis >= tipWidth && rightDis < tipWidth/2){                 // 在左上方显示
console.log("leftTop");
leftTop(current,width,height,content);
}else if(bottomDis >= height && leftDis < tipWidth/2 && rightDis >= tipWidth){              // 在右下方显示
console.log("rightBottom");
rightBottom(current,width,height,content);
}else if(bottomDis >= height && leftDis >= tipWidth && rightDis < tipWidth/2){              // 在左下方显示
console.log("leftBottom");
leftBottom(current,width,height,content);
}else {                                                                                     // 默认在上方显示
console.log("top2");
showTop(current,width,height,content);
}
}
$(function (){
$(".close").click(function (){
$(".toolTip").hide();
});
});

这里本人根据工作的需求只做了现在的功能 同学们可以根据自己的需求自行丰富。

css代码如下 本人写的比较简单，欢迎同学们自定出更加炫酷的样式。

.toolTip {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: none;
overflow: auto;
min-height: 40px;
max-width: 200px;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #fff;
background-clip: padding-box;
color:#666;
border: 1px solid #ccc;
font-family:"Microsoft YaHei",Tahoma,Arial,Helvetica;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}
.close {
position: absolute;
right: 10px;
top: 0px;
cursor: pointer;
font-size: 20px;
color: #000;
font-weight: bold;
}
.tipContent {
overflow: auto;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}

这是一个简单的提示框插件 欢迎大神们指导。也欢迎童鞋们丰富出更加炫酷的样式更加牛叉的功能！！！