vue里面修改title样式

今天遇到一个需求：
鼠标滑过一个模块，提示框会随着鼠标移动而移动
标签的title属性具有这个效果，但是标签title的默认样式太丑
<template>
  <div class=".item-title" title="点击查看详情"></div>
</template>
前提：安装jquery 然后再导入
import $ from jquery

mounted()｛

$(function () {

        var x = 10;
        var y = 20;
        var newtitle = '';
        $('.item-title').mouseover(function (e) {
            newtitle = this.title;
            this.title = '';
            $('body').append('<div class="mytitle" >' + newtitle + '</div>');
            $('.mytitle').css({
                'left': (e.pageX + x + 'px'),
                'top': (e.pageY + y - 80 + 'px')
            }).show();
        }).mouseout(function () {
            this.title = newtitle;
            $('.mytitle').remove();
        }).mousemove(function (e) {
            $('.mytitle').css({
                'left': (e.pageX + x +10 + 'px'),
                'top': (e.pageY + y - 60 + 'px')
            }).show();
        })
    });

｝

 

<style>
.mytitle{
   position: absolute;
   color: #fff;
   font-size: 14px;
   padding: 4px;
   background: red;
   z-index: 999;
}
</style>