鼠标悬浮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 ...
随机推荐
- JavaWeb笔记（三）HTTP
常见请求头 User-Agent:浏览器版本信息,可以解决浏览器兼容性问题 Referer:请求来源地址,可以防盗链和统计 Request 方法 获取请求方式: String getMethod() ...
- jquery serialize() 方法
ajax异步提交的时候,会使用该方法. 方法:jQuery ajax - serialize() 方法
- servlet 图片流
http://www.cnblogs.com/focusj/archive/2011/04/30/2057577.html https://segmentfault.com/q/10100000004 ...
- python获取文件夹下数量
import os totalSize = 0 fileNum = 0 dirNum = 0 def visitDir(path): global totalSize global fileNum g ...
- Python中的多线程编程，线程安全与锁(二)
在我的上篇博文Python中的多线程编程,线程安全与锁(一)中,我们熟悉了多线程编程与线程安全相关重要概念, Threading.Lock实现互斥锁的简单示例,两种死锁(迭代死锁和互相等待死锁)情况及 ...
- hdu 3499 Flight (最短路径)
Flight Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Su ...
- hdu 6102 GCDispower
多校6 GCDispower(容斥) 题意: 给一个长度为\(n\)的排列 给q组询问 每次查询\(L,R\)内的答案 \(\sum_{i=L}^{R}\sum_{j=i+1}^{R}\sum_{k= ...
- mongo基本命令
> show dbs -- 查看数据库列表 > use admin --创建admin数据库,如果存在admin数据库则使用admin数据库 > db ---显示当前使 ...
- 2018超详细sublime text3+python3.x安装配置教程（附常用插件安装教程）
导读 本文是关于2018年7月最新版sublime text3+pythin3.x下载及安装配置教程,sublime text3版本为3176,python版本为3.7,安装环境是基于windows1 ...
- 百度之星复赛T6&&hd6149 ——Valley Numer II
Problem Description 众所周知,度度熊非常喜欢图. 它最近发现了图中也是可以出现 valley —— 山谷的,像下面这张图. 为了形成山谷,首先要将一个图的顶点标记为高点或者低点.标 ...