Question

我目前遇到问题，您可以查看here。如果将鼠标悬停在徽标上，您将看到工具提示。多数民众赞成，但

如果您尝试使用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';
}

这部分＆＃34; tooltip.style.height =＆＃39; 60px＆＃39;;＆＃34;如果你将高度添加到DOM元素，你可以省略。

图像上的工具提示悬停不正常

1 个答案: