Javascript 鼠标悬停/鼠标指针闪烁与工具提示的交互

鼠标悬停会侦听父元素，但当移动到tooltip（子）元素时，它会闪烁。 控制台日志显示为mouseover/mouseenter事件快速触发

Mouseenter根本不保持tooptip显示

  element.on('mouseenter', hoverIn); // or mouseover
  element.on('mouseleave', hoverOut);

这个问题是特定于angularjs/jquery/bootstrap的吗

如何才能更好地处理

---

您可以使用。

添加

指针事件：无.tooltip.right

---

只需给出工具提示“toolTip placement=“right”即可

<span tool-tip tooltip-state="tooltipState" tooltip-
placement="right">
<button uib-tooltip = '{{text}}'
tooltip-is-open="tooltipState"
type="button" class="btn btn-default">
Hoverable Tooltip Directive
</button>
</span>

悬停工具提示指令

---

因为它被赋予了按钮（内部元素/子元素），它会闪烁。

首先，您的演示中没有jQuery。然后，我认为问题的原因是指令中设置

tooltipState

之间的竞争条件

scope.tooltipState = false;
scope.$apply();

并通过引导

uib tooltip

指令处理

tooltipState

属性。如果删除

scope.$apply（）

：这两个指令都在为

tooltipState

和

scope而斗争。$apply（）

只是使其更加精简

---

为了解决这个问题，我尝试使用

uib工具提示模板

选项，并在引导的工具提示元素本身上设置自定义

tool tip

指令。然后，我将只处理mouseleave事件，并在离开工具提示时删除

tooltipState

标志。另外，使用

event.relatedTarget

如果目标是按钮，我们可能不会删除

工具提示

标志。

一个简单的解决方案是设置

tooltip-trigger="none"

我查看了文档，它说工具提示触发器默认为“mouseenter”。这可能就是为什么有多个指令试图设置tooltipState的值的原因

将其设置为“无”可实现我的期望

---

更新了

当你在工具提示上但不在按钮上时，这会杀死工具提示。确实存在一些设置工具提示状态标志的竞速条件，但是，在查看文档后，我找到了一种使用工具提示触发器修复此问题的简单方法。我创造了另一个答案，这个答案帮助了我。非常感谢。