图像悬停工具提示无法正常工作

Question

我目前遇到问题，您可以在此处检查。 如果将鼠标悬停在徽标上，您将看到一个工具提示。 可以，但是

如果您使用Firefox进行尝试，则工具提示会卡在徽标下方（正确）

如果您使用Chrome浏览器进行尝试，则工具提示会跟随鼠标（错误）

我怎样才能解决这个问题？

我正在使用以下代码，这些代码是我在此站点上找到的。

<script type="text/javascript">
function showTooltip(e, tooltip)
{
    e = window.event ? window.event : e;
    tooltip = document.getElementById(tooltip);
    if(tooltip.style.display != "block")
        tooltip.style.display = "block";
    tooltip.style.left = event.clientX + "px";
    tooltip.style.top = event.clientY + "px";
}

function hideTooltip(e, tooltip)
{
    e = window.event ? window.event : e;
    tooltip = document.getElementById(tooltip);
    if(e.toElement == tooltip)
    {
        showTooltip(e, tooltip);
        return;
    }
    tooltip.style.display = "none";
}

这是徽标代码

<img class="logo-main scale-with-grid hastooltip" 
src="#" onmousemove="showTooltip(event, 'dvTooltip');" 
onmouseout="hideTooltip(event, 'dvTooltip');" /> 

<div id="dvTooltip" style="display:none;position:absolute;background-color:#191919; padding: 15px; bottom: -87px; z-index: 100;" 
onmousemove="showTooltip(event, 'dvTooltip');">

CONTENT
</div>

我需要将框粘贴在徽标下方，而不要在Chrome上跟随鼠标，是否可以？

Answer 1

实际上Chrome可以正常工作:)，您的代码正在指示工具提示移动。

这里的任何方式都是您的代码的有效版本

var logo = document.querySelector('.hastooltip');
var tooltip = document.querySelector('#dvTooltip');

// Set tooltip height
tooltip.style.height = '60px';

function showTooltip(e) {
  e = window.event ? window.event : e; 

  if(tooltip.style.display != "block"){
      tooltip.style.display = "block";
      tooltip.style.position = "fixed";
  }

  tooltip.style.left = (logo.getBoundingClientRect().x - 30) + 'px';
  tooltip.style.top = (logo.getBoundingClientRect().y + logo.getBoundingClientRect().height + 10) + 'px';
}

这部分是“ tooltip.style.height ='60px';” 如果将高度添加到DOM元素，则可以省略。