javascript中工具提示的垂直定位

我试图在悬停certian类元素时显示工具提示。问题在于垂直定位。我想将其定位为悬停元素的右中心，以便工具提示的箭头指向悬停元素。 当我从ajax调用中获取值时，div高度根据悬停类元素的不同而变化。因此，每个悬停元素的刀尖位置显示不同。对于不同的工具提示高度，是否有办法始终将其定位为右中心？ 我不是Javascript或CSS方面的专家。提前感谢你的帮助

<script type = "text/javascript" >
    Sys.Application.add_load(function() 
{
            var nodeList = document.querySelectorAll(".URL);
                for (i = 0; i < nodeList.length; i++) {
                    temp = nodeList[i].getAttribute("href");
                    if (user[i]) {
                        callURL = baseURL + apiURL + "/" + temp;
                        divTag = document.createElement('div');
                        nodeList[i].appendChild(divTag);
                        divTag.setAttribute("class", "tooltiptext");
                        runAjax1(divTag);
                    }

                }

                function runAjax1(obj1) {
                    $.ajax({
                        success: function(runfeed) {
                            DisplayName = ; //will parse it from ajax respose "runfeed"
                            AccountStatus = ; //will parse it from ajax respose "runfeed"
                            LastLoginDate = ; //will parse it from ajax respose "runfeed"
                            Helptext = '<table><tr>' + '<td id="header" >Name:</td>' + '<td id="value">' + DisplayName + '</td>' + '</tr>' +
                                '<tr>' + '<td id="header">Status:</td>' + '<td id="value">' + obj1.outerHTML + '</td>' + '</tr>' +
                                '<tr>' + '<td id="header">Groups:</td>' + '<td id="value">' + GroupName + '</td>' + '</tr></table>';
                            obj2.innerHTML = Helptext;
                        }
                        error: function(errormsg) {
                            console.log(JSON.stringify(errormsg.responseXML));
                        }
                    });

                }

            });
</script>

        <style type = "text/css" > a.URL {
     position: relative;
     display: inline;
}
 a.URL .tooltiptext {
     position: absolute;
     width:200px;
     color: #FFFFFF;
     background: #737373;
     border: 2px solid #000000;
     text-align: left;
     visibility: hidden;
     border-radius: 6px;
     z-index: 1;
     top: -45px;
     left: 110%;
     padding: 5px 0;
}
 a.URL .tooltiptext:before {
     content: '';
     position: absolute;
     top: 50%;
     right: 100%;
     margin-top: -12px;
     width: 0;
     height: 0;
     border-right: 12px solid #000000;
     border-top: 12px solid transparent;
     border-bottom: 12px solid transparent;
}
 a.URL .tooltiptext:after {
     content: '';
     position: absolute;
     top: 50%;
     right: 100%;
     margin-top: -8px;
     width: 0;
     height: 0;
     border-right: 8px solid #737373;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
}
 .URL:hover .tooltiptext {
     visibility: visible;
}
 </style>

Sys.Application.add_load（函数（）
{
var nodeList=document.queryselectoral（“.URL”）；
对于（i=0；i

我自己做到了这一点。我在.tooltiptext中替换了以下几行，这创造了奇迹

---

top:50%；transform:translateY（-50%）；

我自己已经做到了。我在.tooltiptext中替换了以下几行，创造了奇迹

---

top:50%；transform:translateY（-50%）；

我自己实现了这一点。我在.tooltiptext中替换了以下几行，它创造了奇迹top:50%；transform:translateY（-50%）；我自己实现了这一点。我在.tooltiptext中替换了以下几行，它创造了奇迹top:50%；transform:translateY（-50%）；