Tooltip flickers when on hover on the edge of element

[anubhav193]

When I hover on a tooltip element's edge it flickers and is not a smooth transition. Here is a demo. Try hovering in and out of the edges of the question mark and do so slowly.

[45kb]

@anubhav193 Hi, yes that's because the area is too small and the tooltip gets removed and recreated everytime, i think it is a standard behavior and you should prepare a larger area for the tooltip, maybe some transparent padding outside of the tooltip element, with some custom css transitions on the tooltip.

However a PR would be appreciated 👍

[anubhav193]

So I tried enlarging the hover area. Here is the update demo

I figured, the problem is that the hover area is circular but the tooltip element is rectangular. In the demo i have marked the tooltip element with red. So the tooltip gets rendered when the mouse enters the red area. Then get re-rendered when moving from the red area into the gray circle. This causes the flicker.

Is this the intended behaviour?

[45kb]

@anubhav193 Found the problem probably, here is my fork http://codepen.io/45kb/pen/pRrWRj

changing the hide and show triggers:

tooltipsConfProvider.configure({
	'smart': true,
      'showTrigger': 'mouseenter',
      'hideTrigger': 'mouseleave',
	'speed': 'fast'
});```

[45kb]

The problem is here https://github.com/720kb/angular-tooltips/blob/master/lib/angular-tooltips.js#L205

must be mouseenter i believe, tell me if it's fixed even on your side and i'll change that :)

[anubhav193]

Perfect! Works now. Thanks.

[45kb]

ok i will release a new version to fix this. thank you too for spotting it out. 👍