fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position

[CarlosTenorio]

Bug description or feature request:

Tooltip flickering when hover the mouse on the border on the tooltip position.

Plunker/StackBlitz that reproduces the issue:

The Bug is reproducible on tooltip examples of: https://valor-software.com/ngx-bootstrap/#/tooltip
I'm working with Bootstap 3.3.7 but I only reproduce the bug on version 4

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 1.9.3

Angular: 4.2.5

Bootstrap: 3.3.7

Build system: Angular CLI, System.js, webpack, starter seed:

angular/cli : 1.2.0

[IlyaSurmay]

Can't reproduce this on both versions (used chrome and firefox).

[CarlosTenorio]

Chrome version: Versión 62.0.3202.94 (Build official) (64 bits)
Video Bug:
https://vimeo.com/243642568

[IlyaSurmay]

Thanks, I reproduced it too. Strange but the flickering is only happening for tooltip on left button

[CarlosTenorio]

If you zoom the page (125%) is possible reproduce when the tooltip is on top too.

[valorkin]

it's and edge case :D

[zodrog]

Same issue here on Chrome latest

[danielordonez]

Same here with the latest version of Chrome

[danielordonez]

I found that the issue is happening when the tooltip becomes visible because it overlaps the element by a bit and since the z-index of the tooltip is normally higher than the element that fires the tooltip your element hides behind it meaning that you're no longer hovering it so it hides the tooltip and it creates a hide and show loop thus giving you the flickering effect.

It has to do with the positioning that ngx-bootstrap gives to the tooltip, but you would have to move it left by 2 pixels to solve the issue, which wouldn't be the most convenient thing to do in most cases. This issue happens also to bootstrap itself, you can test it in the official bootstrap demo.

You can quickly solve this issue by setting the z-index of the element that fires the tooltip to 1071 or higher (tooltip's default is 1070)

[alireza-saberi]

I still have the flickering issue even after changing z-index to 1071 and above

[rokdazone]

Add "pointer-events: none;" to the tooltip css, problem solved!

.tooltip { pointer-events: none; }

[alireza-saberi]

@rokdazone this one works!
thanks

[jasonpberry]

Thanks @rokdazone !!

[kevduncan]

Adding container="body" to the element with the tooltip solved this issue for me

[fijea]

@rokdazone Thanks!

[suparnavg]

What solved it for me was setting
.bs-tooltip-left CSS to {top: -12px; left: -182px;} - that is the "stable" position of the tooltip

[JoelParke]

@suparnavg Thanks!

[spernica]

This solution works, but css of the tooltip element is broken (it was moved by few pixels to the right with my left tooltip).
.tooltip { pointer-events: none; }

Much better is init all tooltips with container body in javascript.
$('[data-toggle="tooltip"]').tooltip({ container: 'body' });

[j3soon]

For me is:
.popover { pointer-events: none; }

[boazrymland]

Be advised: in at least my version of AngularJS Material, you'll need to use
{ pointer-events: none !important; }

since the rendered tooltip has 'style' attribute on it which will override simple usage recommended above.

[skirankumar7]

.popover { pointer-events: none; }
above makes cursor not to change 'cursor hand' type.
how to handle it?

[boazrymland]

.popover {cursor: default; }

?

[Domainv]

fixed here #4660, soon will be merged

[velrino]

Stranger things!

I resolved this problem in the project I'm working on with:

.popover { pointer-events: none !important; }

[simondi]

.tooltip { pointer-events: none; } solves my problem.

[MarijkeM]

I've tried all of the above solutions but nothing works for me. Are there any other suggestions? I use angular 5.0.0 and bootstrap 4.0.0 beta

[KimAlexander]

+ 1

[scottd98052]

Setting the container to 'body' was the fix for me.

Much better is init all tooltips with container body in javascript.
$('[data-toggle="tooltip"]').tooltip({ container: 'body' });

[Vl4t0m1c0]

Hello, I had similar problem, for me "top tooltip" was jumping 1px up and down nonstop only in chrome browser.
My fix was changing padding in component to:
.bs - tooltip - top, .bs - tooltip - auto[x - placement^="top"] { padding: 0.3rem 0; }

Code before:
.bs - tooltip - top, .bs - tooltip - auto[x - placement^="top"] { padding: 0.4rem 0; }

[onepoordeveloper]

I was facing the same problem and found out that it was because of css transition on all elements
* { transition: 0.1s; }

[sanjmeh]

I found that the issue is happening when the tooltip becomes visible because it overlaps the element by a bit and since the z-index of the tooltip is normally higher than the element that fires the tooltip your element hides behind it meaning that you're no longer hovering it so it hides the tooltip and it creates a hide and show loop thus giving you the flickering effect.

It has to do with the positioning that ngx-bootstrap gives to the tooltip, but you would have to move it left by 2 pixels to solve the issue, which wouldn't be the most convenient thing to do in most cases. This issue happens also to bootstrap itself, you can test it in the official bootstrap demo.

You can quickly solve this issue by setting the z-index of the element that fires the tooltip to 1071 or higher (tooltip's default is 1070)

This seems to be the root cause of my shiny hoverbox flickering too but I can't apply your suggestions on the R shiny code directly. Could someone direct me to a place where this is also explained for R shiny ggplot environment?

[denuihason]

Add "pointer-events: none;" to the tooltip css, problem solved!

.tooltip { pointer-events: none; }

It works well .... Thanks

[NataD]

I have the same issue, but none of the solutions mentioned in this post helps.

[onepoordeveloper]

I have the same issue, but none of the solutions mentioned in this post helps.

Check if there are some hover effects being applied on the target element. Remove if there are..

[NataD]

I have the same issue, but none of the solutions mentioned in this post helps.

Check if there are some hover effects being applied on the target element. Remove if there are..

Removing hover effects from the target element does not solve the issue.

[MathewGrg]

This worked for me. { pointer-events: none; }

[kunalturankar]

i just removed placement:"left" , this worked for me

[kavyai]

Add "pointer-events: none;" to the tooltip css, problem solved!

.tooltip { pointer-events: none; }

Above fix is not working for me because I have a link "click here "placed inside tooltip ,I'll not be able to click on the link if I'm using --pointer-events: none...

[meera1002]

Add "pointer-events: none;" to the tooltip css, problem solved!

.tooltip { pointer-events: none; }

Thank you 👍