前景：
页面部分区域需要移入悬浮效果，当然默认的 title 也是可以的，最多只是格格不入，但是却是最为靠谱的。。
思路：
基于 jq 实例扩展 、使用立即执行函数保持功能独立、 自定义类实现功能封装的定位解释小功能
实现：
1.html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8" />
<title>tip</title>
<link rel="stylesheet" href="tip.css" />
<link rel="stylesheet" href="animate.css" />
</head> <body>
<div id="left" class="test left" data-mess="top title <br /> some mes ">left</div> <script src="https://blog-static.cnblogs.com/files/justSmile2/jquery-1.9.1.min.js"></script>
<script src="tip.js"></script> <script type="text/javascript">
$("#left").tips({
"posType": "right"
});
</script>
</body> </html>
2.css
tip.css
.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:;
}
.iToolTri {
position: absolute;
z-index:;
display: block;
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
border: 8px solid #999999;
}
.iToolTri i {
position: absolute;
z-index:;
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;
}
* {
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;
}
animate.css
.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:;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity:;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity:;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity:;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity:;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity:;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity:;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInUp {
0% {
opacity:;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity:;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity:;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInRight {
0% {
opacity:;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity:;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity:;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity:;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
3.js
tip.js
(function ($, window, document, undefined) {
var pluginName = "tips",
defaults = {
floor: '.iTooltipMes',
addClass: "",
dataMess: "",
posType: "top" // [left|top|right|bottom]
};
function Plugin(element, options) {
var options = $.extend(true, {}, 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("mouseover", _this.opts.floor, function () {
// _this.isOk = true;
// _this.setShow($this);
// });
// $(document).on("mouseout", _this.opts.floor, function () {
// _this.isOk = false;
// $(_this.opts.floor).remove();
// });
$(document).on("mouseout", _this.elem, function () {
if (!_this.isOk) {
_this.isOk = true;
_this.tmpPosType = _this.opts.posType;
$(_this.opts.floor).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("data-mess");
var tmpHtml = "<div class='iTooltipMes animated'>" + mess + "<i class='iToolTri'><i></i></i></div>";
$("body").append(tmpHtml);
// _this.$elem.append(tmpHtml);
var iTooltipMes = $(_this.opts.floor);
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 () {
$(this).selector && new Plugin(this, arguments[0])
}
})(jQuery, window, document);