Mouseover / Mouseenter flickers interaction with tooltip

Question

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 rapidly

Mouseenter does not keep tooptip display at all

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

Is this issue angularjs / jquery / bootstrap specific ?

How can it be better handled?

You can test it out with this plnkr.

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