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提示框可以显示 ...

随机推荐

Swift 学习Using Swift mix and match, network: 写rss读者
有使用第三方库.因此,需要使用mix and match财产. 请指出错误,谢谢! rss 阅读器,非常easy的代码.仅仅是为了学习swift语言而写. 1､BaseViewController.s ...
Linux的selinux
SELinux 操作模式学科 (Subject):SELinux 序,因此你能够将『主体』跟 process 划上等号: 目标 (Object): 主体程序是否能存取的『目标资源』一 ...
seajs进行模块化开发
seajs进行模块化开发模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑概览使用seajs模块化加载器进行模块化开发, ...
mysql导出和导入命令更改数据库名称数据库
概要 mysql 数据库导入和导出,有两种方法 1)从试点SQL脚本.导入(导入导出又分两种:1. 命令. 2. 工具.这里我们仅仅介绍命令). 2)直接拷贝数据库文件(此方法不推荐). 一.mysq ...
解决opengl计算顶点的法线问题
因为需要的论文,最近开始学习OpenGL.由于刚入门的初学者有这么总会遇到很多问题,. 这些天,好不容易才OpenGL个问题弄明确了. 几点迷惑: 在网上百度.发现非常多求平面法向量的介绍以及程序.后 ...
cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第六步---炮台&点击炮台加入英雄&英雄升级
/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写,第一别全然照搬代码:第二能够说 ...
漫游Kafka实战篇clientAPI
原文地址:http://blog.csdn.net/honglei915/article/details/37697655 Kafka Producer APIs 旧版的Procuder API有两种 ...
WebAPI客户端
封装WebAPI客户端,附赠Nuget打包上传VS拓展工具一.前言上篇< WebAPI使用多个xml文件生成帮助文档 >有提到为什么会出现基于多个xml文件生成帮助文档的解决方案,因为 ...
string.format大全
字符串的数字格式 stringstr1 =string.Format("{0:N1}",56789); //result: 56,789.0 strin ...
cmd介面，进adb命令提示符error
有几个操作的电话系统测试,需要输入adb命令时出现了头疼的事,当输入命令,一个直接报执行:error 推荐处理的方法: 1.当然就是关机重新启动.之前我是这样,挺麻烦.必进在win7上输入命令费时间. ...

js实现tooltip动态提示效果（文字版）

js实现tooltip动态提示效果（文字版）的更多相关文章

随机推荐

热门专题