EventLister 参数在 forEach 中需要错误（工具提示）

Question

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

我一直在我的 codepen. I also have an earlier codepen 上处理这个问题，它完整地保留了 Daniel Imms 的原始 JS，并且在控制台中没有显示任何错误。

我更改了结构以使用 forEach 添加事件侦听器并使用箭头函数来尝试使语法高效。不幸的是，我做错了什么，一开始我没有把它捡起来，因为工具提示部分只适用于 HTML 和 CSS。我仍然需要 Javascript 来控制硬编码的 X Y 位置，但我不希望它跟随光标。我在 codepen 中看到的错误是：

TypeError: EventTarget.addEventListener: At least 2 arguments required, but only 1 passed

和

SyntaxError: expected expression, got ')'

非常感谢所有帮助。

以及：

"message": "TypeError: tooltips is undefined",

请看我附上的代码：

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>

Answer 1

您正在将 forEach 的 return 值分配给 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>

EventLister 参数在 forEach 中需要错误（工具提示）

EventLister arguments required error inside forEach (tooltip)

javascript

foreach

mouseevent

mouseover