鼠标悬浮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 ...
随机推荐
- shell之基本语法
转: read 命令从 stdin 获取输入并赋值给 PERSON 变量,最后在 stdout 上输出: #!/bin/bash # Script follows here: echo " ...
- android ListView与EditText共存错位
在一个ListView中,如果里面有EditText会很麻烦,因为修改EditText里面的数据会发生错位现象. 这时候,需要在适配器BaseAdapter的getView中设置setTag(),将p ...
- SQL 唯一标识 写法
创建唯一标识的方法~16位唯一标识 SELECT LTRIM(STR(CONVERT(varchar(100), GETDATE(), 112)))+right(cast(power(10,6) as ...
- GYM - 101620 J.Justified Jungle
题意: 给出一棵树,删掉其中一些边,要求生成的每个子树节点数一样.输出所有可以删掉的边数. 题解: 以节点1为根,预处理每个子树的大小.对于每个n的因数x,还需满足子树为他倍数的点够n/x个,那么删的 ...
- 2017 多校5 Rikka with String
2017 多校5 Rikka with String(ac自动机+dp) 题意: Yuta has \(n\) \(01\) strings \(s_i\), and he wants to know ...
- SQL UNPIVOT和PIVOT
/* table_source PIVOT( 聚合函数(value_column) FOR pivot_column IN(<column_list>) ) 完整语法: table_sou ...
- HDU 1171Big Event in HDU（转01背包）
题意: 给你一组数,分成差距最小的两份A,B(A>=B) 分析: 转01背包 注意: 01背包用一维数组 不要用二维 二维数组若是开太大,内存超限,开太小,RE #include "c ...
- java IO的字节流和字符流及其区别
1. 字节流和字符流的概念 1.1 字节流继承于InputStream OutputStream, 1.2 字符流继承于InputStreamReader OutputStre ...
- ClientScript.RegisterClientScriptBlock 不执行
ClientScript.RegisterClientScriptBlock 不执行 页面中 form标签必须加入 runat=server
- 《Linux命令、编辑器与shell编程》第三版 学习笔记---001
Linux概述 1.具有内核编程接口 2.支持多用户(同时) 3.支持多任务 4.支持安全的分层文件系统 a.标准 b.链接 c.权限 5.shell(命令解释器和编程语言) a.文件名生成(通配符和 ...