Mouseover / Mouseenter Flickers Interaction With Tooltip

The mouseover listens on the parent element, but when moving into the tooltip (child) element, it flickers. The console log show as if mouseover / mouseenter event is fired rapidl

Solution 1:

First of all, there is no jQuery in your demo. Then, I think, the cause of the issue is the race condition between setting tooltipState in your directive

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

and handling the tooltipState attribute by the bootstrap uib-tooltip directive. That become more obvious if you remove scope.$apply(): both directives are fighting for tooltipState and scope.$apply() just makes it a bit more streamlined.

To solve it I would try to use uib-tooltip-template option and set up custom tool-tip directive on the bootstrap's tooltip element itself. Then I would handle only mouseleave event and would drop the tooltipState flag when we are leaving the tooltip. Also, using event.relatedTarget we may not drop the tooltipState flag if the target is button.

Solution 2:

Add pointer-events: none; in your .tooltip.right

Docs for pointer-events

Solution 3:

Just give toolTip 'tooltip-placement="right" ' to span.

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

Because its given to button(inner element/child), its flickering.

Solution 4:

An easy solution for this is to set

tooltip-trigger="none"

I checked the documentation and it says tooltip-trigger by default listen to 'mouseenter'. May be that's the reason why there are multiple directives trying to set the value for tooltipState

Setting it to 'none' achieve what I desired

Updated Plnrk