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

随机推荐

《C++ Primer Plus》学习笔记6
<C++ Primer Plus>学习笔记6 第11章使用类 <<<<<<<<<<<<<<<&l ...
Nyoj 引水工程(最小生成树)
描述南水北调工程是优化水资源配置.促进区域协调发展的基础性工程,是新中国成立以来投资额最大.涉及面最广的战略性工程,事关中华民族长远发展.“南水北调工程”,旨在缓解中国华北和西北地区水资源短缺的国家 ...
关于system（）的一些用法
C语库函数函数名: system 功能: 发出一个DOS命令用法: int system(char *command); 它包含头文件<stdlib.h> system ...
【足迹C++primer】49、超载，变化，运营商
超载,变化,运营商 Conversion Operators 转换操作符 operator type() const Conversions to an array or a function typ ...
uva 12003 Array Transformer （大规模阵列）
白皮书393页面. 乱搞了原始数组中.其实用另一种阵列块记录. 你不能改变原始数组. 请注意,与原来的阵列和阵列块的良好关系,稍微细心处理边境.这是不难. #include <cstdio> ...
linux_后台启动多个java -jar 程序，及关闭
启动脚本 startup.sh #!/bin/bash x=$(($)) )) do java -jar /home/chenpenghui/crawler/crawler-hb/StartUpIp. ...
HDU 3523 Image copy detection（KM最大匹配）
HDU 3523 Image copy detection 题目链接题意:这题事实上题意读懂就简单了,说白了就是1-n放到1-n列,每列的值为每列上数字和该数字的差的绝对值,然后求总和最小思路:就 ...
2013级C++第13周(春)项目——继承的进一步话题与GUI应用开发
课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接第一部分程序阅读:阅读以下类的定义,请说出在 ...
【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
JS开发调试
开发调试工具页面制作之开发调试工具(1) 开发工具介绍开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE) 常用的文本编辑器:Sublime Text.Notepad++.EditPl ...

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

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

随机推荐

热门专题