鼠标悬浮tip 显示
鼠标悬浮tip 显示
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.0.js"></script>
<script type="text/javascript" src="js/tip.js"></script>
</head> <body>
<div class="test">
<span data-tip-msg="我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是aadqwew测试数据">我是测试数据</span>
</div>
</body>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
} .test {
text-align: center;
margin: 200px auto;
} .test span {
display: inline-block;
border: 1px solid red;
} </style> <script>
$(function() {
$('.test span').tips();
})
</script> </html>
(function($) {
var defaults = {
dire: 9,
w: 250,
_x: 0,
_y: 0,
borderColor: 'yellow',
bgColor: 'blue',
color: 'red',
padding: [5, 10],
arrWidth: 10,
useHover: true,
zIndex: 100000
};
$.fn.tips = function(opt) {
var tip, opts = $.extend({}, defaults, opt);
if(this[0]) {
opts.tag = this;
if(opts.useHover) {
opts.tag.hover(function() {
tip = new Tip(opts);
tip.show();
}, function() {
tip.close();
});
} else {
tip = new Tip(opts);
tip.show();
}
return this;
}
};
function Tip(opts) {
this.dire = opts.dire;
this.width = opts.w;
this.zIndex = opts.zIndex;
this.borderColor = opts.borderColor;
this.bgColor = opts.bgColor;
this.color = opts.color;
this.padding = opts.padding;
this.arrWidth = opts.arrWidth;
this.offsetX = opts._x;
this.offsetY = opts._y;
this.tag = opts.tag; //this
this.msg = opts.msg;
this.wrap = $('<div class="tip-wrap"></div>');
this.innerArr = $('<div class="tip-arr-a"></div>');
this.outerArr = $('<div class="tip-arr-b"></div>');
this.init();
};
Tip.prototype = {
init: function() {
var msg = this.tag.data('tipMsg'); //使用data防止内存泄漏
if(!this.msg) {
this.msg = msg;
}
this.createTemp();
},
createTemp: function() {
var t = this;
t.createWrap();
t.setPosition();
},
createWrap: function() {
var t = this;
t.wrap.html(t.msg);
var wrapCSS = {
position: "absolute",
display: "none",
width: t.width,
border: '1px solid ' + t.borderColor,
'border-radius': '5px',
background: t.bgColor,
color: t.color,
padding: t.getPadding()
};
var tiparra_or_b = {
position: "absolute",
width: "0px",
height: "0px",
lineHeight: "0px",
borderStyle: "dashed",
borderColor: "transparent",
}
t.outerArr.css(tiparra_or_b).css(t.getArrStyle(t.dire, t.arrWidth, t.borderColor));
t.innerArr.css(tiparra_or_b).css(t.getArrStyle(t.dire, t.arrWidth, t.bgColor));
t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS);
$('body').append(t.wrap);
},
setPosition: function() {
var t = this;
console.log(t.tag);
console.log(t.getPosition(t.tag));
var posObj = t.getPos(t.dire, t.getPosition(t.tag), t.getPosition(t.wrap), t.arrWidth),
pos = posObj.pos,
innerPos = posObj.innerPos,
outerPos = posObj.outerPos;
t.wrap.css({ top: pos.y, left: pos.x });
t.innerArr.css({ top: innerPos.y, left: innerPos.x });
t.outerArr.css({ top: outerPos.y, left: outerPos.x });
},
getPadding: function() {
var t = this,
pad = '0px',
padArr = t.padding,
len = padArr.length;
switch(len) {
case 1:
pad = padArr[0] + 'px';
break;
case 2:
pad = padArr[0] + 'px ' + padArr[1] + 'px';
break;
case 3:
pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px';
break;
case 4:
pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px ' + padArr[3] + 'px';
break;
}
return pad;
},
getPosition: function(tag) {
return { t: tag.offset().top, l: tag.offset().left, h: tag.outerHeight(), w: tag.outerWidth() };
},
getArrStyle: function(dir, width, color) {
var style;
switch(dir) {
case 11:
case 12:
case 1:
style = {
'border-bottom-style': 'solid',
'border-width': '0px ' + width + 'px ' + width + 'px',
'border-bottom-color': color
};
break;
case 2:
case 3:
case 4:
style = {
'border-left-style': 'solid',
'border-width': width + 'px 0px ' + width + 'px ' + width + 'px',
'border-left-color': color
};
break;
case 5:
case 6:
case 7:
style = {
'border-top-style': 'solid',
'border-width': width + 'px ' + width + 'px 0px',
'border-top-color': color
};
break;
case 8:
case 9:
case 10:
style = {
'border-right-style': 'solid',
'border-width': width + 'px ' + width + 'px ' + width + 'px 0px',
'border-right-color': color
};
break;
}
return style || {};
},
getPos: function(d, tagPos, pos, arrWidth) {
var _pos, _innerPos, _outerPos, l = tagPos.l,
t = tagPos.t,
w = tagPos.w,
h = tagPos.h,
ww = pos.w,
hh = pos.h;
switch(d) {
case 0:
case 1:
_pos = { x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t + h + arrWidth };
_outerPos = { x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth };
_innerPos = { x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth + 1 };
break;
case 2:
_pos = { x: l - ww - arrWidth, y: t + h / 2 - arrWidth - 20 - 1 };
_outerPos = { x: ww - 2, y: 20 };
_innerPos = { x: ww - 2 - 1, y: 20 };
break;
case 3:
_pos = { x: l - ww - arrWidth, y: t + h / 2 - hh / 2 };
_outerPos = { x: ww - 2, y: (hh - 2) / 2 - arrWidth };
_innerPos = { x: ww - 2 - 1, y: (hh - 2) / 2 - arrWidth };
break;
case 4:
_pos = { x: l - ww - arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh };
_outerPos = { x: ww - 2, y: hh - 2 - 20 - arrWidth * 2 };
_innerPos = { x: ww - 2 - 1, y: hh - 2 - 20 - arrWidth * 2 };
break;
case 5:
_pos = { x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t - arrWidth - hh };
_outerPos = { x: ww - 2 - 20 - arrWidth * 2, y: hh - 2 };
_innerPos = { x: ww - 2 - 20 - arrWidth * 2, y: hh - 2 - 1 };
break;
case 6:
_pos = { x: l + w / 2 - ww / 2, y: t - arrWidth - hh };
_outerPos = { x: (ww - 2) / 2 - arrWidth, y: hh - 2 };
_innerPos = { x: (ww - 2) / 2 - arrWidth, y: hh - 2 - 1 };
break;
case 7:
_pos = { x: l + w / 2 - 20 - arrWidth, y: t - arrWidth - hh };
_outerPos = { x: 20, y: hh - 2 };
_innerPos = { x: 20, y: hh - 2 - 1 };
break;
case 8:
_pos = { x: l + w + arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh };
_outerPos = { x: -arrWidth, y: hh - 2 - 20 - arrWidth * 2 };
_innerPos = { x: -arrWidth + 1, y: hh - 2 - 20 - arrWidth * 2 };
break;
case 9:
_pos = { x: l + w + arrWidth, y: t + h / 2 - hh / 2 };
_outerPos = { x: -arrWidth, y: (hh - 2) / 2 - arrWidth };
_innerPos = { x: -arrWidth + 1, y: (hh - 2) / 2 - arrWidth };
break;
case 10:
_pos = { x: l + w + arrWidth, y: t + h / 2 - arrWidth - 20 - 1 };
_outerPos = { x: -arrWidth, y: 20 };
_innerPos = { x: -arrWidth + 1, y: 20 };
break;
case 11:
_pos = { x: l + w / 2 - 20 - arrWidth, y: t + h + arrWidth };
_outerPos = { x: 20, y: -arrWidth };
_innerPos = { x: 20, y: -arrWidth + 1 };
break;
case 12:
_pos = { x: l + w / 2 - ww / 2, y: t + h + arrWidth };
_outerPos = { x: (ww - 2) / 2 - arrWidth, y: -arrWidth };
_innerPos = { x: (ww - 2) / 2 - arrWidth, y: -arrWidth + 1 };
break;
default:
_pos = { x: 0, y: 0 };
}
return {
pos: _pos,
innerPos: _innerPos,
outerPos: _outerPos
};
},
show: function() {
this.wrap.show();
},
close: function() {
this.wrap.remove();
}
};
})(jQuery);
鼠标悬浮tip 显示的更多相关文章
- 使用JS实现鼠标悬浮切换显示
实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- 鼠标悬浮上去显示小手CSS
鼠标悬浮上去显示小手CSS只需要添加一句css代码即可 cursor:pointer;
- css实现table中td单元格鼠标悬浮时显示更多内容
table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
- easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法
easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...
- CSS鼠标悬浮DIV后显示DIV外的按钮
昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...
- ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
- asp.net gridview 鼠标悬浮提示信息
使用场景: gridview绑定数据,某列数据太多,故超过一定字符,隐藏起来,同时鼠标移到指定列显示其明细信息: 知识点: 1,oderListTbl_DataBound事件中,添加,oderList ...
随机推荐
- Tomcat 顶层结构
Tomcat中最顶层的容器叫Server,代表整个服务器,Server中包含至少一个Service,用于具体提供服务. Service主要包含两部分:Connector 和 Container ...
- Windows7下打开特定的端口
往往我们发布到IIS的网站多了,80的端口不能满足的情况下,我们就会想到设定其它端口来使用.当然还可以通过改变host文件来实现,这里就不细说了.回到端口,在windows7系统下怎么实现呢?下面将带 ...
- 201621123033 《Java程序设计》第8周学习总结
第八次作业 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 首先调 ...
- Axure+SVN——实现多人团队开发
最近进行考试系统重构,一个小组十几个人,这么多人要同时搞需求画原型.这样原本的合作开发工具SVN已经不能满足现在的需求了,这是就找到了一个新的方法--Axure+SVN. 在SVN服务器端建立一个空的 ...
- rxjs的世界
rxjs学习了几个月了,看了大量的东西,在理解Observable的本文借鉴的是渔夫的故事,原文,知识的主线以<深入浅出rxjs>为主,动图借鉴了rxjs中文社区翻译的文章和国外的一个动图 ...
- 基于eclipse创建maven工程
一.创建项目 1.Eclipse中用Maven创建项目 上图中Next 2.继续Next 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建 ...
- Create Windows Server 2008 cluster from the command line
How to create a Windows Server 2008 cluster from the command line? Creating a cluster in Server 2008 ...
- AngularJS中获取ng-repeat动态生成的ng-model值
需求:通过ng-repeat动态生成的CheckBox,实现勾选控制对应的批次号.如图: html: <div class="clearfix"> <div cl ...
- UVA 10652 Board Wrapping(二维凸包)
传送门 刘汝佳<算法竞赛入门经典>P272例题6包装木板 题意:有n块矩形木板,你的任务是用一个面积尽量小的凸多边形把它们抱起来,并计算出木板占整个包装面积的百分比. 输入:t组数据,每组 ...
- linux系统调用实现代码分析【转】
转自:http://linux.chinaunix.net/doc/kernel/2001-07-30/637.shtml 启动早就读完,现在为了写笔记再从启动之后粗略的大体读一遍,基本就是几个大模块 ...