移动到文字显示提示效果

        *{
            margin: 0;
            padding: 0;
        }
        a {
            margin:50px;
            /*display: block;*/
        }
        #box {
            width: 300px;
            background: #eee;
            border: 1px solid #000;
            position: absolute;
            padding: 10px;
            display: none;
            line-height: 30px;
        }
        #img {
            height: 269px;
            width: 358px;
            position: absolute;
            border: 1px solid #000;
            display: none;
        }

<a href="#" class="text" title="append()在被选元素的结尾插入指定内容
        // append(function(index,html){return html})在函数指定的元素结尾插入内容 ，index当前元素的位置，html当前选择器的html内容">提示文字效果</a>

//jq
                var x = 15;
        var y = 15;
        $(function() {

            $("a").mouseover(function(e) {
                this.myTitle = this.title;//保存获取当前元素a属性title的值
                this.title = "";//清空默认的title值

                var oDiv = "<div id='box'>" +this.myTitle + "</div>";

                $("body").append(oDiv);

                $("#box").css({

                    "left": e.pageX + x + "px",
                    "top": e.pageY + y + "px"

                }).show("fast");//slow normal fast 显示速度快慢的值


            }).mouseout(function() {
                this.title = this.myTitle;//移出后为title在赋值

                $("#box").remove();

            }).mousemove(function(e) {

                var X = e.pageX + x;
                var Y = e.pageY + y;
                $("#box").css({

                    "left": X + "px",
                    "top": Y + "px" 

                });

            });

        });

var oA = document.getElementsByTagName("a")[0];
     console.log(oA)
    console.log(oA.getAttribute("title"))
    console.log(oA.attributes)//获取收的属性

        var oDiv = document.createElement("div");
            oDiv.setAttribute("id", "box"); //设置属性
            oDiv.innerHTML = oA.getAttribute("title"); //获取属性值
            console.log(oDiv)
        document.getElementsByTagName("body")[0].appendChild(oDiv);
        
        var d = document.getElementById("box");
        var x = 20;
        var y = 20;
     oA.onmouseover = function(e) { 

        oA.setAttribute("title", "");//属性值为空
        d.style.display = "block";

        document.onmousemove = function(e) {

            console.log(e.clientX);
            console.log(e.clientY);
            d.style.left = e.clientX + x + "px";
            d.style.top = e.clientY + y + "px";
        };

     };
    
     oA.onmouseout = function() {

        d.style.display = "none";

     };

注意：移动到文字上取消默认的提示信息，
移入时，保持this.tilte = this.myTitle；移出后在移入时在把this.myTilte赋给this.title.这样就可以做到取消默认提示。获取鼠标坐标的方法pageX，pageY；