自动匹配显示位置的提示框--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;
}

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