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

时间:2017-12-28 23:35:22

标签: javascript html css

我目前遇到问题,您可以查看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上按下鼠标,这可能吗?

1 个答案:

答案 0 :(得分:0)

实际上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元素,你可以省略。