jQuery自定义title框

<h5 class="z-font-small">
   <span>映射接口的英文名称</span>
   <span hint="所填字段在接口里的英文名称" class="icon_hint icon-hint"></span>
</h5>

<div class="z-title zTitle"></div>

这段是弹窗

.z-title{
    position: absolute;
    z-index: 9999;
    display: none;
    padding: 5px 1rem;
    background-color: #0c1f2b;
    color: #fff;
    border-radius: 5px;
    width: 140px;
    border: 1px solid rgb(0, 79, 125);
    font-size: 12px;
}
.z-title:after{
    position: absolute;
    content: "";
    left: 50%;
    bottom: -5px;
    border-bottom: 1px solid rgb(0, 79, 125);
    border-right: 1px solid rgb(0, 79, 125);
    width: 10px;
    height: 10px;
    background-color: #0c1f2b;
    transform: translate(-50%,0) rotate(45deg);
}

function hint() {
    // var hintEles = $(".icon_hint");
    $(document).on("mouseenter",".icon_hint",function (e) {
      var tempHint = $(this).attr("hint"),
          x = $(this).offset().left,
          y = $(this).offset().top;
      var zTitle =  $(".zTitle");
      zTitle.text(tempHint).show();
      var w = zTitle.text(tempHint).outerWidth();
      var h =zTitle.text(tempHint).outerHeight();
      x = x- w/2 + 6;
      y = y - h - 10;
      zTitle.css({
          left:x,
          top:y
      })
    });
    $(document).on("mouseleave",".icon_hint",function (e) {
        $(".zTitle").hide();
    })
}