EventLister自变量在forEach工具提示中出现错误

问题描述

我一直在尝试构建一个更简单的基于JavaScript的工具提示。经过反复试验和大量搜索之后，我发现了Daniel Imms post。

我一直在codepen上进行这项工作。我还有一个earlier codepen，它完整地保留了Daniel Imms的原始JS，并且在控制台中未显示任何错误。

我更改了结构，以使用forEach添加事件侦听器，并使用箭头功能尝试使语法高效。不幸的是，我做错了事，起初并没有选择，因为该工具提示仅在HTML和CSS中起作用。我仍然需要Javascript来控制硬编码的X Y位置，但是我不希望它跟随光标。 我在codepen中看到的错误是：

TypeError：EventTarget.addEventListener：至少需要2个参数，但仅传递了1个

和

SyntaxError：期望的表达式，得到了'）'

非常感谢所有帮助。

以及：

“消息”：“ TypeError：工具提示未定义”，

请参阅所附的代码：

var tooltips = document.querySelectorAll('.tooltip span').forEach(item => {
  item.addEventListener('mouSEOver',event => {
    tooltips.style.top = '40px';
     tooltips.style.left = '80px';   
  })
})

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

.infoBox
{
background: pink;
padding: 0.5%;    
width: 290px;
height: 40px;
display: block;
}

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infoBox">TEST</div>
    </span>
</a>


<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infoBox">TEST2</div>
    </span>
</a>

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infoBox">TEST3</div>
    </span>
</a>

解决方法

您正在将forEach的返回值分配给tooltips，并且返回值始终为undefined。

您需要将document.querySelectorAll('.tooltip span')的值分配给tooltips变量并按如下方式实现forEach。

var tooltips = document.querySelectorAll('.tooltip span');
tooltips.forEach(item => {
  item.addEventListener('mouseover',event => {
    tooltips.style.top = '40px';
     tooltips.style.left = '80px';   
  })
})

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

.infobox
{
background: pink;
padding: 0.5%;    
width: 290px;
height: 40px;
display: block;
}

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST</div>
    </span>
</a>


<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST2</div>
    </span>
</a>

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST3</div>
    </span>
</a>