使用原生js来替换title属性的悬浮文字提示-可自定义样式和出现时间-190826更新版本2.0源代码

本文链接：https://blog.csdn.net/qq_26909801/article/details/89562621

这篇博客介绍了如何使用原生js替代H5的title属性，以实现统一的悬浮文字提示样式和延迟时间。作者提供了简单的js和html代码示例，讲解了选择器、函数的this指向以及MutationObserver的使用，适用于不考虑IE低版本的场景。

摘要由CSDN通过智能技术生成

简介

要让一个DOM元素出现悬浮文字提示，一般情况下，我们都会选择使用H5的title属性。例如:

<div title="456">123</div>

这样设置之后，当鼠标在div上悬浮过了一段时间之后，网页上鼠标位置附近就会出现悬浮文字提示，例如这样：
title 但是，不同的浏览器，悬浮等待的时间和悬浮文字的样式都可能会不一样，例如chrome上显示是白底灰字，firefox上就可能是黄底黑字，时长可能是3s或者1s，如果为了确保不同浏览器的用户体验的效果趋于一致的话，那么我们就需要禁用默认的title属性，改用js手动实现悬浮文字的提示。

1.需求分析

为了提高组件的简洁性，所以这里我采用原生js进行编码，不兼容IE 6 7 8，并且没有做过渡动画，只是简单是隐藏显示，有兴趣的同学可以改用jquery重构来提高代码兼容性，用fadeIn fadeOut等动画效果代替直接的显示隐藏。
经分析，H5的title属性的作用逻辑如下：

鼠标进入元素时，延时一定时间后显示悬浮文字提示，并且当鼠标在元素内移动时移除文字提示
鼠标离开元素时，移除文字提示
文字提示为一个inline-block的div或span，固定定位，位置在鼠标位置的附近。
因为这个组件比较简单，所以我就直接上代码啦：

2.代码解析

js和html测试代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box{
            margin-top: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box" title="456">123</div>
    <div>
        <span title="hello world!">asdjkasl</span>
        <span title="aslkdjsakl">fjksdkfj</span>
    </div>
<script>
    function test(){
        alert(1);
    }
    //使用自定义的悬浮文字提示代替原生的title属性，采用addEventListner进行事件绑定，不兼容IE 6 7 8
    var titleTools = {
        _init : function(time){
            var temp = time;
            time = parseInt(time);
            if(!isNaN(time)&&time>=0){
                this.timeout = time;
            }else{
                console.warn("param "+time+" is not a number or out of range! using default timeout setting");
            }
            //选中所有含有title属性的节点
            var eles = document.querySelectorAll('*[title]');
            for(var i=0;i<eles.length;i++){
                //隐藏原先的title属性，改用js进行控制
                if(eles[i].title){
                    eles[i].dataset.title = eles[i].title;