跟随鼠标的hover tooltip使用CSS transform时间距不一致问题求解

你当前用transform: translate(-50%, -200%)实现偏移，其中Y轴的百分比偏移是相对于tooltip自身高度计算的：文本越多tooltip高度越大，-200%对应的实际偏移像素值就越大，自然会出现间距随文本长度变化的问题。同时你的CSS里存在display属性冲突、width: 100%的冗余配置，也是导致异常的诱因。

1. 修改CSS配置 #

调整tooltip的位移规则，将Y轴的百分比偏移改为JS动态计算的固定像素偏移，仅保留X轴的水平居中：

.tooltip {
  /* 仅保留X轴居中，Y轴偏移交给JS动态计算 */
  transform: translateX(-50%);
  display: none;
  position: absolute;
  color: #F0B015;
  background-color: #000;
  border: none;
  border-radius: 4px;
  padding: 15px 10px;
  z-index: 10;
  /* 删掉冲突的display:block和冗余的width:100%、默认top/left值 */
  max-width: 200px;
  text-align: center;
}

其余CSS代码保持不变即可。

2. 修改JS的鼠标跟随逻辑 #

计算tooltip的实际高度，动态设置top值保证和鼠标的固定间距（示例中固定间距设为12px，可自行调整）：

$('.tooltipLink').hover(function () {
     var title = $(this).attr('data-tooltip');
     $(this).data('tipText', title);
     if(title != ''){
        // 先把元素插入DOM再执行淡入，保证高度计算准确
        $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn(200);
     }
 }, function () {
     $(this).attr('data-tooltip', $(this).data('tipText'));
     $('.tooltip').fadeOut(200, function(){
       // 淡出后删除元素避免残留
       $(this).remove();
     });
 }).mousemove(function (e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     var $tooltip = $('.tooltip');
     // 固定间距可根据需求自行调整数值
     var fixedGap = 12;
     // 计算tooltip的top值：鼠标Y坐标 - tooltip自身高度 - 固定间距
     var tipTop = mousey - $tooltip.outerHeight() - fixedGap;
     $tooltip.css({
         top: tipTop,
         left: mousex
     })
 });

修改后不管tooltip文本多少，底部的小箭头和鼠标之间的间距都会保持你设定的固定值，不会出现间距忽大忽小的问题。同时因为tooltip完全位于鼠标上方，不会和鼠标位置重叠，也不会出现闪烁问题。

内容的提问来源于stack exchange，提问作者Kristen