我当前遇到问题,可以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上跟随鼠标,是否可以?

最佳答案

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

关于javascript - 图像悬停工具提示无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48015708/

10-12 12:33
查看更多