jQuery给元素加tooltip提示框
css库
.just-tooltip {
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
background: #000;
z-index: 9999
}
.just-tooltip .just-con {
padding: 8px 10px;
color: #fff
}
.just-tooltip .just-top,
.just-tooltip .just-bottom,
.just-tooltip .just-left,
.just-tooltip .just-right {
content: "";
position: absolute;
width: 0;
height: 0;
overflow: hidden;
border-style: solid
}
.just-tooltip .just-top {
left: 50%;
top: 100%;
border-width: 7px 5px 0;
margin-left: -5px;
border-color: #1b1e24 transparent transparent transparent;
_border-color: #1b1e24 #000 #000 #000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
.just-tooltip .just-bottom {
left: 50%;
top: -7px;
border-width: 0 5px 7px;
margin-left: -5px;
border-color: transparent transparent #1b1e24 transparent;
_border-color: #000 #000 #1b1e24 #000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
.just-tooltip .just-left {
right: -7px;
top: 50%;
border-width: 5px 0 5px 7px;
margin-top: -5px;
border-color: transparent transparent transparent #1b1e24;
_border-color: #000 #000 #000 #1b1e24;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
.just-tooltip .just-right {
left: -7px;
top: 50%;
border-width: 5px 7px 5px 0;
margin-top: -5px;
border-color: transparent #1b1e24 transparent transparent;
_border-color: #000 #000 #000 #1b1e24;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
.just-tooltip .just-confirm {
text-align: center;
padding: 10px 0;
margin: 0 10px 10px
}
.just-tooltip .just-yes,
.just-tooltip .just-no {
background: #fff;
color: #000;
border: 0;
padding: 5px 10px
}
.just-tooltip .just-no {
margin-left: 10px
}
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-ms-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s
}
@-webkit-keyframes flipInUp {
0% {
-webkit-transform: perspective(400px) rotateX(-90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(5deg)
}
70% {
-webkit-transform: perspective(400px) rotateX(-5deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@-moz-keyframes flipInUp {
0% {
-moz-transform: perspective(400px) rotateX(-90deg);
opacity: 0
}
40% {
-moz-transform: perspective(400px) rotateX(5deg)
}
70% {
-moz-transform: perspective(400px) rotateX(-5deg)
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@-o-keyframes flipInUp {
0% {
-o-transform: perspective(400px) rotateX(-90deg);
opacity: 0
}
40% {
-o-transform: perspective(400px) rotateX(5deg)
}
70% {
-o-transform: perspective(400px) rotateX(-5deg)
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@keyframes flipInUp {
0% {
transform: perspective(400px) rotateX(-90deg);
opacity: 0
}
40% {
transform: perspective(400px) rotateX(5deg)
}
70% {
transform: perspective(400px) rotateX(-5deg)
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@-webkit-keyframes flipInRight {
0% {
-webkit-transform: perspective(400px) rotateY(-90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateY(5deg)
}
70% {
-webkit-transform: perspective(400px) rotateY(-5deg)
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
}
@-moz-keyframes flipInRight {
0% {
-moz-transform: perspective(400px) rotateY(-90deg);
opacity: 0
}
40% {
-moz-transform: perspective(400px) rotateY(5deg)
}
70% {
-moz-transform: perspective(400px) rotateY(-5deg)
}
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
}
@-o-keyframes flipInRight {
0% {
-o-transform: perspective(400px) rotateY(-90deg);
opacity: 0
}
40% {
-o-transform: perspective(400px) rotateY(5deg)
}
70% {
-o-transform: perspective(400px) rotateY(-5deg)
}
100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1
}
}
@keyframes flipInRight {
0% {
transform: perspective(400px) rotateY(-90deg);
opacity: 0
}
40% {
transform: perspective(400px) rotateY(5deg)
}
70% {
transform: perspective(400px) rotateY(-5deg)
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1
}
}
.flipInTop,
.flipInBottom .flipInLeft .flipInRight {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important
}
.flipInTop,
.flipInBottom {
-webkit-animation-name: flipInUp;
-moz-animation-name: flipInUp;
-o-animation-name: flipInUp;
animation-name: flipInUp
}
.flipInLeft,
.flipInRight {
-webkit-animation-name: flipInRight;
-moz-animation-name: flipInRight;
-o-animation-name: flipInRight;
animation-name: flipInRight
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn
}
.moveTop {
-webkit-animation: moveTop .6s ease both;
animation: moveTop .6s ease both
}
.moveBottom {
-webkit-animation: moveBottom .6s ease both;
animation: moveBottom .6s ease both
}
.moveLeft {
-webkit-animation: moveLeft .6s ease both;
animation: moveLeft .6s ease both
}
.moveRight {
-webkit-animation: moveRight .6s ease both;
animation: moveRight .6s ease both
}
@-webkit-keyframes moveTop {
from {
opacity: 0;
-webkit-transform: translateY(-20px)
}
to {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-webkit-keyframes moveBottom {
from {
opacity: 0;
-webkit-transform: translateY(20px)
}
to {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-webkit-keyframes moveLeft {
from {
opacity: 0;
-webkit-transform: translateX(-20px)
}
to {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-webkit-keyframes moveRight {
from {
opacity: 0;
-webkit-transform: translateX(20px)
}
to {
opacity: 1;
-webkit-transform: translateX(0)
}
}
部分css代码
<style>
.demo {
border: 1px solid red;
display: inline-block;
width: 100px;
height: 40px;
margin: 300px 10px;
}
.setBgColor {
background: #417aff;
border: 1px solid #417aff;
}
/* 三角箭头颜色 */
.setBgColor .just-top {
border-top-color: #417aff;
}
</style>
<div class="demo demoUp">上边提示</div>
<div class="demo demoDown">下边提示</div>
<div class="demo demoLeft">左边提示</div>
<div class="demo demoRight">右边提示</div>
<div class="demo demoStyle1">提示动画1</div>
<div class="demo demoStyle2">提示动画2</div>
<div class="demo demoStyle3">提示动画3</div>
$(".demoUp").mouseover(function() {
var _this = $(this);
_this.justToolsTip({
animation: "moveInTop",
//width: "500px",
//contents: _this.text(),
contents: "<h1>h1文字</h1><br><h1>h1文字</h1></br>",
gravity: 'top'
});
})
$(".demoDown").mouseover(function() {
var _this = $(this);
console.log(_this)
_this.justToolsTip({
animation: "moveInBottom",
//width:"300px",
contents: _this.text(),
gravity: 'bottom'
});
})
$(".demoLeft").mouseover(function() {
var _this = $(this);
_this.justToolsTip({
animation: "moveInLeft",
//width:"300px",
contents: _this.text(),
gravity: 'left'
});
})
$(".demoRight").mouseover(function() {
var _this = $(this);
_this.justToolsTip({
animation: "moveInRight",
//width:"300px",
contents: _this.text(),
gravity: 'right'
});
})
$(".demoStyle1").mouseover(function() {
var _this = $(this);
_this.justToolsTip({
animation: "fadeIn",
contents: _this.text(),
theme: "setBgColor",
gravity: 'top'
});
})
$(".demoStyle2").mouseover(function() {
var _this = $(this);
_this.justToolsTip({
animation: "flipIn",
contents: _this.text(),
gravity: 'left'
});
})
$(".demoStyle3").mouseover(function() {
var _this = $(this);
_this.justToolsTip({
animation: "flipIn",
//width:"300px",
contents: _this.text(),
gravity: 'top'
});
})
引入以下JavaScript库，并且需要引入jQuery
附jQuery: https://cdn.staticfile.org/jquery/3.5.1/jquery.js
;(function($) {
function justTools(elem, options) {
this.elem = elem;
this.set = options;
}
justTools.prototype = {
addAnimation: function() {
switch (this.set.animation) {
case 'none':
break;
case 'fadeIn':
this.obj.addClass('animated fadeIn');
break;
case 'flipIn':
switch (this.set.gravity) {
case 'top':
this.obj.addClass('animated flipInTop');
break;
case 'bottom':
this.obj.addClass('animated flipInBottom');
break;
case 'left':
this.obj.addClass('animated flipInLeft');
break;
case 'right':
this.obj.addClass('animated flipInRight');
break;
}
break;
case 'moveInLeft':
this.obj.addClass('animated moveLeft');
break;
case 'moveInTop':
this.obj.addClass('animated moveTop');
break;
case 'moveInBottom':
this.obj.addClass('animated moveBottom');
break;
case 'moveInRight':
this.obj.addClass('animated moveRight');
break;
}
},
close: function() {
this.obj.remove();
},
setPosition: function() {
var setPos = {};
var pos = {
x: this.elem.offset().left,
y: this.elem.offset().top
};
var wh = {
w: this.elem.outerWidth(),
h: this.elem.outerHeight()
};
var rightTmp = (pos.x + wh.w / 2) + this.obj.outerWidth() / 2;
var leftTmp = (pos.x + wh.w / 2) - this.obj.outerWidth() / 2;
switch (this.set.gravity) {
case 'top':
if (rightTmp > $(window).width()) {
setPos = {
x: pos.x + wh.w - this.obj.outerWidth(),
y: pos.y - this.obj.outerHeight() - this.set.distance
};
this.obj.find(".just-" + this.set.gravity).css("left", this.obj.outerWidth() - wh.w / 2 + "px")
} else if (leftTmp < 0) {
setPos = {
x: pos.x,
y: pos.y - this.obj.outerHeight() - this.set.distance
};
this.obj.find(".just-" + this.set.gravity).css("left", wh.w / 2 + "px")
} else {
setPos = {
x: pos.x - (this.obj.outerWidth() - wh.w) / 2,
y: pos.y - this.obj.outerHeight() - this.set.distance
};
}
break;
case 'bottom':
if (rightTmp > $(window).width()) {
setPos = {
x: pos.x + wh.w - this.obj.outerWidth(),
y: pos.y + wh.h + this.set.distance
};
this.obj.find(".just-" + this.set.gravity).css("left", this.obj.outerWidth() - wh.w / 2 + "px")
} else if (leftTmp < 0) {
setPos = {
x: pos.x,
y: pos.y + wh.h + this.set.distance
};
this.obj.find(".just-" + this.set.gravity).css("left", wh.w / 2 + "px")
} else {
setPos = {
x: pos.x - (this.obj.outerWidth() - wh.w) / 2,
y: pos.y + wh.h + this.set.distance
};
}
break;
case 'left':
setPos = {
x: pos.x - this.obj.outerWidth() - this.set.distance,
y: pos.y - (this.obj.outerHeight() - wh.h) / 2
};
break;
case 'right':
setPos = {
x: pos.x + wh.w + this.set.distance,
y: pos.y - (this.obj.outerHeight() - wh.h) / 2
};
break;
}
this.obj.css({
"left": setPos.x + "px",
"top": setPos.y + "px"
});
},
setEvent: function() {
var self = this;
if (self.set.events == "click" || self.set.events == "onclick") {
self.obj.on("click", function(e) {
e.stopPropagation();
})
$(document).click(function() {
self.obj.remove();
});
}
if (self.set.events == "mouseover" || self.set.events == "onmouseover" || self.set.events == "mouseenter") {
this.elem.on("mouseout, mouseleave", function() {
self.close();
});
console.log(1)
}
},
setConfirmEvents: function() {
var self = this;
var yes = this.obj.find(".just-yes");
var no = this.obj.find(".just-no");
yes.click(function() {
if (self.set.onYes(self) == true) {
self.close();
};
})
no.click(function() {
self.close();
self.set.onNo(self);
})
},
addConfirm: function() {
this.obj.append("<div class='just-confirm'><button type='button' class='just-yes'>" +
this.set.yes + "</button><button type='button' class='just-no'>" + this.set.no + "</button></div>");
this.setConfirmEvents();
},
setContent: function() {
this.obj = $("<div id=" + this.set.id + " class='just-tooltip " + this.set.theme + "'" +
"style='width:" + this.set.width + "'><div class='just-con'>" + this.set.contents + "</div>" +
"<span class='just-" + this.set.gravity + "'></span></div>");
$("body").append(this.obj);
this.setEvent();
this.addAnimation();
if (this.set.confirm == true) {
this.addConfirm();
}
},
init: function() {
var e = arguments.callee.caller.caller.caller.caller.caller.arguments[0] || $.event.fix(event || window.event)
this.set.events = e.type;
var justToolObj = $(".just-tooltip");
if (justToolObj) {
justToolObj.remove();
}
e.stopPropagation();
this.setContent();
this.setPosition();
var self = this;
$(window).resize(function() {
self.setPosition();
})
}
}
$.fn.justToolsTip = function(options) {
var defaults = {
height: "auto",
width: "auto",
contents: '',
gravity: 'top',
theme: '',
distance: 10,
animation: 'none',
confirm: false,
yes: '纭畾',
no: '鍙栨秷',
onYes: function() {},
onNo: function() {}
}
this.each(function() {
options = $.extend(defaults, options);
options.id = new Date().getTime();
var tooltip = new justTools($(this), options);
tooltip.init();
});
}
})(jQuery);
2935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
