search

720kb / angular-tooltips

Angularjs tooltips module, add tooltips to your elements - https://720kb.github.io/angular-tooltips
351 stars 157 forks source link

Tooltip flickers when on hover on the edge of element #194

Closed anubhav193 closed 7 years ago

anubhav193 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

Perfect! Works now. Thanks.

45kb commented 7 years ago

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