记录title显示时间问题

今天遇到一个需求， 说是要求标签title属性显示的时间缩短， 首先想到了用伪类试了一下不是理想的效果， 所以就全局写了一个js创建了一个div元素，设置x y坐标 并显示 然后在全局index.html里全局引入js 以及全局引入scss js 代码如下：

 window.addEventListener('load',function(){
	 var x=10;
	var y = 20;
	function showPopupText(){
	  if(!this.title){
	    return
	  }
	  var o=event.srcElement;
	  
	   this.myTitle = this.title;
	        this.title = "";
	        var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
	        $("body").append(tooltip); //追加到文档中
	        $("#tooltip").css({
	            "top": (event.pageY + y) + "px",
	            "left": (event.pageX + x) + "px"
	        }).show(); //设置X  Y坐标， 并且显示
	    
	}
	function outfn(){
	  if(this.myTitle){
	    this.title = this.myTitle;
	  }
	  $("#tooltip").remove(); //移除
	}
	 function movefn(){
	   $("#tooltip").css({
	            "top": (event.pageY + y) + "px",
	            "left": (event.pageX + x) + "px"
	        });
	}
	$("body").on("mouseover","[title]",showPopupText);
	$("body").on("mouseout","[title]",outfn);
	$("body").on("mousemove","[title]",movefn);
        $("body").on("click","[title]",outfn);  //点击的时候title去掉
})

scss代码样式： #tooltip就是设置title的样式

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin moreBtn {
  &>span{
    color: #999;
    font-size: 10px;
    border: 1px solid #e0e0e0;
    padding: 5px;
    border-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
    i,span{
      vertical-align: middle;
    }
  }
}

@mixin display_flex{
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

/*主轴对齐*/
@mixin justify-content_flex-center{
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@mixin align-items_center{
  -webkit-align-items:center;
  -moz-align-items:center;
  -ms-align-items:center;
  -o-align-items:center;
  align-items:center;
}
@mixin flex($num){
  -webkit-flex: $num;        /* Chrome */
  -ms-flex: $num;             /* IE 10 */
  flex: $num;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-flex: $num;     /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: $num;       /* OLD - Firefox 19- */
}

 #tooltip {
    border: 1px solid #e5e5e5;
    background: #fff;
    position: absolute;
    padding: 1px;
    color: #878787;
    display: none;
    padding: 0.07rem 0.15rem ;
}