鼠标悬浮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 ...
随机推荐
- PHP面向对象 封装与继承
知识点: PHP封装三个关键词: 一.public 公有的,被public修饰的属性和方法,对象可以任意访问和调用 二.private 私有的,被private修饰的属性和方法,只能在类内部的方法可以 ...
- CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...
- P1447 [NOI2010]能量采集
题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种得非常整齐,一共 ...
- 华中农业大学第四届程序设计大赛网络同步赛 J
Problem J: Arithmetic Sequence Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 1766 Solved: 299[Subm ...
- json数据格式的简单案例
json数据是一种文本字符串,它是javascript的原生数据格式,在数据需要多次重复使用时,json数据是ajax请求的首先.(注:ajax返回的数据格式支持三种分别为:文本格式,json.和xm ...
- html状态码
100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功201——提示知道新文件的URL202——接受和处理.但处理未完成203——返回信息不确定或不完整 ...
- suse10与suse11连接Xmanager的配置
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://feidandelion.blog.51cto.com/1050439/42217 ...
- BeeFramework 系列
http://ilikeido.iteye.com/category/281079 BeeFramework 系列三 MVC篇上 博客分类: Beeframework iphone开发 mvc框架Be ...
- Linux将命令添加到PATH中【转】
转自:http://www.jb51.net/LINUXjishu/150167.html 电脑中必不可少的就是操作系统.而Linux的发展非常迅速,有赶超微软的趋势.这里介绍Linux的知识,让你学 ...
- usb驱动---linux ACM驱动详解ACA【转】
转自:http://blog.chinaunix.net/uid-9185047-id-3404684.html DTE提供或接收数据,连接到网络中的用户端机器,主要是计算机和终端设备.与此相对地,在 ...