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提示框可以显示 ...
随机推荐
- VB.Net出口Excel原则
在VB机房的版本中,我们已经暴露导出Excel特征,此功能已重新接触到不同的理解 一.原理 要实现导出Excel的功能,首先要引用命名空间,目的是能够使用该命名空间下的方法和类 Imports ...
- imagick获取图片的大小bug
<? php /* imagick的获取图片的高度和宽度函数有问题,使用GD函数可获得正确结果 gd函数 array getimagesize ( string $filename [, arr ...
- git - 简明指南（转）
安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹,打开,然后执行 git init 以创建新的 git 仓库. 检出仓库 执行 ...
- android学习记录（三）百度地图错误---只有一个电话显示帧，没有地图内容。
安卓开发新手百度地图,刚开始碰到一个问题,没有地图信息,还有就是它只有一帧. 如图所示: 上网寻找说是key的问题,然后又一次申请.还是不行. 最后再次看了自己的Manifest文件,发现自己的< ...
- android app启动过程（转）
Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...
- （大数据工程师学习路径）第四步 SQL基础课程----创建数据库并插入数据
一.练习内容 1.新建数据库 首先,我们创建一个数据库,给它一个名字,比如“mysql_shiyan”,以后的几次实验也是对mysql_shiyan这个数据库进行操作. 语句格式为“CREATE DA ...
- nodejs中使用monk訪问mongodb
mongodb 安装mongodb 我认为还是用mannual install靠谱一点儿:http://docs.mongodb.org/manual/tutorial/install-mongodb ...
- python 导入库问题
最终解决如下面:我不知道有没有多余的空间 from django.conf import settings from sys import path path.extend(['/home/zoues ...
- hdu Jungle Roads(最小生成树)
Problem Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of for ...
- AspNetPager常用属性及一些样式
AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...