开发工具：悬停事件不会触发 PrimeVue 工具提示组件。如何触发工具提示进行调试？

Question

我无法使用 Chrome 开发工具手动触发 PrimeVue Tooltip 组件（其他浏览器开发工具可能存在相同问题，但未尝试）。

我尝试在 DOM 中选择

<input>

元素，并尝试在开发工具的右键单击上下文菜单中应用“强制状态 > :hover”功能。

如何调试这个工具提示？需要这样做的原因是样式稍微偏离，并且工具提示的箭头部分被隐藏并且没有与输入和工具提示本身正确对齐。

我找到了解决方案（请参阅下面的答案），但发布在这里以防其他人也遇到这个问题。您也可以自己提出其他解决方案。

Answer 1

进行了一些试验、错误和进一步调查，发现 PrimeVue Tooltip 不使用

:hover

事件（我希望他们在文档中提到过这一点）。

相反，它使用

mouseenter

事件。

这是有道理的，因为他们可能想要计算鼠标何时触发工具提示以及何时离开元素，以便他们可以正确实现组件的延迟显示和延迟隐藏配置功能等功能。

为了使用开发工具进行调试，您可以执行以下操作：

1. 找到该元素（或已附加工具提示的任何元素），然后在 Devtools DOM 中选择它。

2. 在控制台中，预先创建 mouseenter 事件

var event = new MouseEvent("mouseover");

3. 在 DOM 中选择的元素上触发 mouseenter 事件，确保所需的元素仍然处于选中状态。

$0.dispatchEvent(event)

上述步骤的功劳，请转到另一个SO答案以了解不同的问题。

要隐藏工具提示，您可以使用鼠标悬停在元素上然后将其移开，或者使用上述步骤（将事件名称更改为 mouseleave）来触发 mouseleave 事件。