Question

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

Mouseenter不会保留所有显示屏幕

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

这个问题是angularjs / jquery / bootstrap特有的吗？

如何更好地处理？

您可以使用this plnkr对其进行测试。

Answer 1

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

中设置belongs_to association之间的竞争条件

tooltipState

并通过bootstrap scope.tooltipState = false; scope.$apply();指令处理tooltipState属性。如果你移除uib-tooltip，这一点就会变得更加明显：两个指令都在争夺scope.$apply()和tooltipState，只是让它更加精简。

要解决这个问题，我会尝试使用scope.$apply()选项并在bootstrap的tooltip元素本身上设置自定义uib-tooltip-template指令。然后我将处理仅 tool-tip事件，并在我们离开工具提示时删除mouseleave标志。另外，使用tooltipState如果目标是按钮，我们可能不会删除event.relatedTarget标志。

Answer 2

在pointer-events: none;

中添加.tooltip.right

Docs for pointer-events

Answer 3

只需提供工具提示＆＃39; tooltip-placement =＆＃34;对＆＃34; ＆＃39;跨越。

<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>

因为它给按钮（内部元素/子元素），它的闪烁。

Answer 4

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

tooltip-trigger="none"

我检查了文档，默认情况下它说工具提示触发器听了＆＃39; mouseenter＆＃39;。可能是因为有多个指令试图设置tooltipState的值

将其设置为“无”＆＃39;实现我想要的目标

更新了Plnrk

鼠标悬停/鼠标中心闪烁与工具提示的交互

4 个答案: