a标签img等鼠标悬停title弹出提示框的样式修改

<a href="" class="tooltip"  title="姓名" >测试一下</a>

<style type="text/css">

#tooltip {
border: 1px solid red;
background: #FF6;
position: absolute;
padding: 1px;
color: #333;
display: none;
}
</style>

<script type="text/javascript">


$(function() {
  var x = 10;
  var y = 20;
  $(".tooltip").mouseover(function(e) {
    $(this).data('title', $(this).attr('title'));
    $(this).attr('title', '');
    let tooltip = "<div id='tooltip'>" + $(this).data('title') + "</div>";
    // 创建 DIV 元素 
    $("body").append(tooltip);
    // 追加到文档中
    $("#tooltip").css({
      "top": (e.pageY + y) + "px",
      "left": (e.pageX + x) + "px"
    }).show();
    //设置 X Y 坐标， 并且显示
  }).mouseout(function() {
    $(this).attr('title', $(this).data('title'))
    $("#tooltip").remove(); // 移除
  }).mousemove(function(e) {
    $("#tooltip").css({
      "top": (e.pageY + y) + "px",
      "left": (e.pageX + x) + "px"
    });
  })
})


</script>