How to correct the tooltip position in angular js

It is the solution if you are annoyed with the hidden tooltip under your elements on the page in angular js

Tooltip used in angular js

The expected behavior of the tooltip on the UI:

Tooltip in angular js

The bug was:

tooltip behind the element bug

Here are the steps to how I fixed it using the z-index property of CSS.

First, find out the class of the tooltip on your UI by inspecting it where it is not hidden in the UI.

As in my case the tooltip class was: 
_720kb-tooltip
when the tooltip was visible on UI one class more added: 
_720kb-tooltip-open

Then I tried only to change the z-index of _720kb-tooltip this class. This class is permanent to the tooltip.
_720kb-tooltip{z-index:999} , it did fix this bug, and the tooltip started to show on the top of the elements. But a new bug it created was that now as its visibility is visible all the time whether we show it on UI or not so my other elements start behaving unexpectedly.
As in my case, the button cursor was not a pointer anymore where the tooltip occupied its place on the button.

So the final step which solved all the bugs:

._720kb-tooltip {z-index: 0;}
._720kb-tooltip._720kb-tooltip-open{z-index: 999;}

Here is the explanation of how it fixed the bug:

The behaviour of the tooltip is, its visibility is always visible whether the element hovers or not. So what it does is, it occupies the place but not visible on UI. like you can check this through inspect element where you placed your tooltip to show. And hence if you apply the z-index as 999 on the class which is applied all the time on the tooltip, it will occupy its space on UI and change the behaviour of other elements which are under it.
So what I did is set the z-index of the all-time class of tooltip as 0 so it can be placed under the elements on the UI, and the behaviour of other elements do not get affected. And I applied the z-index on the class when it is only applied when we hover the element of tooltip So that the z-index will position it correctly to show above other elements.

Leave a comment if any doubts, or just clap if you find it helpful.

Thank you for reading.