js实现tooltip动态提示效果（文字版）
页面中经常用到鼠标移动到一个元素上面显示提示的功能，最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div，比较麻烦。
针对上面个的需求，这边写了一个tooltip动态提示的效果，鼠标移动到元素上面动态展示，移除的时候直接删除，这样每次只生成一个div。代码可以传一个参数（dom元素），如果这个参数存在就相对于这个dom进行定位（这个元素必须为相对或者绝对 或者fixed（固定）定位）;
具体代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>tooltip</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
body,button,input,select,textarea {
font-family:'Microsoft YaHei',arial,SimSun,sans-serif,tahoma;
}
body{
-webkit-text-size-adjust:none;
}
input,select,textarea {
font-size:100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0 none;
}
iframe {
display:block;
}
abbr,acronym {
border:none;
font-variant:normal;
}
del {
text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
q:before,q:after {
content:'';
}
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup {
top:-0.5em;
}
sub {
bottom:-0.25em;
}
ins,a {
text-decoration:none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix{
*zoom:1;
}
.fl {
float:left;
}
.fr {
float:right;
}
.hidenone{
display:none;
visibility:hidden;
}
.hide{
visibility:hidden;
}
.mt10{
margin-top:10px;
}
.mt20{
margin-top:20px;
}
.ml10{
margin-left:10px;
}
.mr10{
margin-right:10px;
}
.pt10{
padding-top:10px;
}
.pl10{
padding-left:10px;
}
.pr10{
padding-right:10px;
}
.tc{
text-align:center;
}
/*表格样式开始*/
.common-table {
margin: 0px auto 10px;
width: 960px;
background: #fff;
text-align: center;
table-layout: fixed;
} .common-table-th {
height: 44px;
background: #F6F6F5;
border: 1px solid #E8E7E4;
font-size: 16px;
color: #333;
text-align: center;
vertical-align: middle;
text-overflow: ellipsis;
} .common-table-td {
border: 1px solid #dcdcdc;
color: #666;
font-size: 14px;
line-height: 50px;
} .common-table-tbody {
margin: 5px auto 10px;
width: 1170px;
background: #fff;
text-align: center;
table-layout: fixed;
}
.th-work-name{
width: 27.6%;
}
.first-score,
.last-score,
.highest-score{
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
color: #00F;
text-align: center;
}
.common-table-td a:link,
.common-table-td a:visited {
color: #00F;
text-decoration: none;
}
/*表格样式结束*/ #pos_h_cread{
position: absolute;
z-index: 9999999;
border-radius: 5px;
width: 500px;
padding:10px;
background:rgba(0, 0, 0, 0.7);
background:#000\9;
filter:alpha(opacity=70);
}
#pos_h_cread span{
filter:alpha(opacity=70);
opacity:.7;
border-color: transparent transparent #000 transparent;
border-style: solid;
border-width: 0px 15px 10px 15px;
height: 0px;
width: 0px;
position:absolute;
top:-10px;
left:50px; }
#pos_h_cread p{
color:#fff;font-size:12px;line-height:18px;
}
</style>
</head>
<body style="height:3000px;">
<div id="a" style="padding:50px;background:#ff0;position:relative;">
<div id="b" style="padding:40px;background:#f00;position:fixed;">
<table id="examTable" class="common-table">
<tr>
<th class="common-table-th">序号</th>
<th class="common-table-th th-work-name">考试名称</th>
<th class="common-table-th">布置时间</th>
<th class="common-table-th">修改初始分</th>
<th class="common-table-th">修改终版分</th>
<th class="common-table-th">修改最高分</th>
<th class="common-table-th">修改次数</th>
</tr>
<tr>
<td class="common-table-td">1</td>
<td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td>
<td class="common-table-td">2016-06-01</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">0</td>
</tr>
<tr>
<td class="common-table-td">1</td>
<td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td>
<td class="common-table-td">2016-06-01</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">0</td>
</tr>
<tr>
<td class="common-table-td">1</td>
<td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td>
<td class="common-table-td">2016-06-01</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">0</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
var tooltip = {
getpos:function(element,dom){
if ( arguments.length == 0 || element == null ) {
return null;
}
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while( element = element.offsetParent ) {
if(element == dom){
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
}
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
},
isSelector:function(){
return !! document.querySelector ? true : false;
},
init:function(dom){
var box = [];
if(this.isSelector()){
box = document.querySelectorAll('.tooltip');
}else{
var a = [];
var elm = document.getElementsByTagName('*');
var _l = elm.length;
for(var i=0;i<_l;i++){
if(/\s*tooltip\s*/.test(elm[i].className)){
a.push(elm[i]);
}
}
box = a;
}
for(var i=0;i< box.length;i++){
box[i].onmouseover = function(){
var _this = this;
var pos = tooltip.getpos(_this,dom);
var div = document.createElement('div');
var p = document.createElement('p');
var span = document.createElement('span');
var text = _this.getAttribute('rel');
p.innerHTML = text;
div.appendChild(p);
div.appendChild(span);
div.id = 'pos_h_cread';
div.style.left = pos.absoluteLeft + 'px';
div.style.top = (pos.absoluteTop + pos.offsetHeight)+ 'px';
if(dom){
dom.appendChild(div);
}else{
document.getElementsByTagName("body")[0].appendChild(div);
}
}
box[i].onmouseout = function(){
var n = document.getElementById('pos_h_cread');
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
}
}
}
}
tooltip.init(document.querySelector('#b'));
</script>
js实现tooltip动态提示效果（文字版）的更多相关文章
- JS仿Android Toast提示效果
注:这个需要jquery文件来提示支持,所以需要先调用Jquery. <script type="text/javascript" src="js/jquery.j ...
- CSS3特效----图片动态提示效果
需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- Unity3D基础学习 NGUI自带Tooltip制作提示文字
简介 NGUI自带的的例子Character中含有一个Tooltip,可以鼠标悬浮到某对象时显示提示文字.非常方便. 创建UITooltip 首先你需要在场景NGUi相机下建立一个空物体我把它命名为T ...
- Tooltip浮动提示框效果（掌握里面的小知识）
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...
随机推荐
- Oracle 数据库 JOB 失败后解密法重试
因为官方文档上没有找到相关的说明,所以这里进行了例如以下測试,为了找到oracle数据库中 job 失败后重试时间的规律. 数据库版本号:11.2.0.3 測试说明:这里创建了一个日志表以及一个执行时 ...
- C++实现链表
最后几天留在Intel,没什么事情,都是开开会.趁着闲功夫,把数据结构复习一下,写了一个list.时间仓促,有些地方考虑的可能没那么到位,望高手们指点. #include <iostream&g ...
- JavaScript权威指南科13章 webj浏览器avascript
13.1 clientjavascript window对象是所有clientjavascript特点和api主要的接入点.它代表了一个浏览器窗口,通过window对象引用它. window 方法 a ...
- Preemption Context Switches 和 Synchronization Context Switches
Preemption Context Switches测量操作系统任务调度线程处理器上执行的次数,以及切换到较高-priority螺纹,数. Synchronization context switc ...
- 超赞的CSS3进度条 可以随进度显示不同颜色
原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
- 文件类似的推理 -- 超级本征值（super feature）
基于内容的变长分块(CDC)技术,能够用来对文件进行变长分块.而后用来进行反复性检測,广泛用于去重系统中.后来又出现了对相似数据块进行delta压缩,进一步节省存储开销. 所以就须要一种高效 ...
- 【SSH三框架】Hibernate基金会七：许多附属业务
相对于上述一关系,在这里,下一个一对多关系说明. 另外,在上述.我们描述了许多人描述的一一对应关系.在关系数据库是多对一的关系.但也有许多关系. 但,只知道它是不够的,Hibernate它是一种面向对 ...
- zoj3791(An Easy Game) DP
意甲冠军:给定两个01弦s1,s2.每一个变化s1在m字 - 位.要求k制作步骤之后s1变s2有多少种方法. 解法:DP,关键是状态的设计.考虑还是唯一性和可传递性.dp[i][j]表示第i步后有j个 ...
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- XP下类似%windir% %userprofile% 的变量的说明(转)
在一些批处理或者系统技巧操作教程文章中,我们常常会看到一些形如 %windir% 或者 %systemdrive% 的变量.这些变量都代表着什么含义呢?下面小技巧之家为大家整理了在Windows XP ...