js實現tooltip動態提示效果（文字版）

時間 2019-12-08
原文原文鏈接
頁面中常常用到鼠標移動到一個元素上面顯示提示的功能，最開始的作法是在下面建立一個div而後動態顯示這個div,可是這樣須要加不少div，比較麻煩。css
針對上面個的需求，這邊寫了一個tooltip動態提示的效果，鼠標移動到元素上面動態展現，移除的時候直接刪除，這樣每次只生成一個div。代碼能夠傳一個參數（dom元素），若是這個參數存在就相對於這個dom進行定位（這個元素必須爲相對或者絕對或者fixed（固定）定位）;html
具體代碼以下web
<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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。