工作需要，網站懸浮提示框要求出現在指定元素上方，由於工作量修改比較大所以要求全站通用，所以寫了一個juqery插件，插件很簡單，大家可以自行更改樣式。
請轉載此文的朋友務必附帶原文鏈接，謝謝。
原文鏈接：http://xuyran.blog.51cto.com/11641754/1876266
插件代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Content/js/jquery-1.9.1.min.js"></script>
</head>
<style>
/*遮罩*/
*{margin: 0px; padding: 0px;font-family: "微軟雅黑";}
.test1{width: 300px;margin-top: 200px;border: solid 1px #37C3FF;margin-left: 400px;}
.test2{width: 600px;margin-top: 200px;border: solid 1px #37C3FF;margin-left: 400px;height: 500px;}
alert-box-small02{line-height:35px;background: rgba(0,0,0,.8);position: absolute;height: 35px;display: none;min-width: 180px;
font-size: 18px;font-weight: bold;color: #FFFFFF;text-align: center;border-radius: 5px;bottom: 0;z-index: 100;}
</style>
<script>
//提示框插件
;(function($) {
$.fn.tooltips = function(options){
$.fn.tooltips.defaults = {
txt:"",
left:""
}
var opts = $.extend({}, $.fn.tooltips.defaults, options);
return this.each(function(){
$this = $(this);
var lf = $this.offset().left; //獲取當前元素相對於文檔窗口左偏移
var rt = $this.offset().top;//獲取當前元素相對於文檔窗口上偏移
var bo = $(window).height() - rt; //獲取指定出現的下偏移，此處爲了實現從下往上滑出效果，因此需要給其定位bottom屬性
var elem = '<div class="alert-box-small02">' + opts["txt"] + '</div>';
$("body").append(elem);
var boxWidth = $(".alert-box-small02").outerWidth();
var divLeft = opts["left"] == ""? -(boxWidth-$this.outerWidth())/2:opts["left"];
$(".alert-box-small02").css({
bottom:bo + 6,
left:parseInt(divLeft） + lf +'px'
});
$(".alert-box-small02").slideDown("fast").delay("400").fadeOut(200);
setTimeout(function(){
$(".alert-box-small02").remove();
},800);
});
}
})(jQuery);
//調用,全站通用
$(function(){
$("#button02").tooltips({
txt:"提示框1測試提示框1測試提示框1",
left:"0"
});
$(".test1").tooltips({txt:"dsdfadfafaf"});
$(".test2").tooltips({
txt:"提示框2測試提示框2測試提示框2測試提示框2測試提示框2測試",
});
})
</script>
<body>
<button id="button02" style="margin-top: 50px;">提示框</button>
<div class="test1">
<p>作爲守望先鋒的創始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
<p>智械危機期間，當埃及遭到沉重打擊後，這個國家的精銳狙擊手們爲元氣大傷的安全部隊提供了強有力的支援，其中就包括安娜·艾瑪莉——世界公認的最出色的狙擊手之一。她的精準、果斷和直覺使其自然而然地成爲了守望先鋒突擊部隊的一員，最終結束了這場智械危機。</p>
</div>
<div class="test2">
<p>作爲守望先鋒的創始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
<p>智械危機期間，當埃及遭到沉重打擊後，這個國家的精銳狙擊手們爲元氣大傷的安全部隊提供了強有力的支援，其中就包括安娜·艾瑪莉——世界公認的最出色的狙擊手之一。她的精準、果斷和直覺使其自然而然地成爲了守望先鋒突擊部隊的一員，最終結束了這場智械危機。</p>
</div>
</body>
</html>