z-index of the tooltip?

[anvk]

Hi there,

First of all thanks a lot for this amazing tooltip. I have a tiny issue with it.
I'm using balloon.css with Material UI. I noticed that the tooltip is always underneath the components (like Select or Table Header Row). Wonder why so. I thought that it should be always on top of anything on the screen no matter what. But the opposite that it always got cut by the Material-UI components which are on the top of the page.

Hope it makes sense.

[kazzkiq]

Hey @anvk, I've tested Balloon in Material UI's website and it seemed to work without any issues.

I'm not sure if the error didn't happened because I've added it at the generated DOM elements, and not the React component itself (so maybe I added it at the wrong element)? But taking a closer look at the UI components, they also do not seem to offer any reason as to why Ballon would be underneath them (most don't even have z-index attributes on them).

Can you please try something like this to your CSS to see if there is any change?

[data-balloon],
[data-balloon]:before,
[data-balloon]:after {
    z-index: 9999;
}

[anvk]

Hi there for such a quick reply.
I'm also puzzled why I observe this strange behavior. To be more precise I use balloon.css for a TableColumn inside of material-ui Table. Tooltip is cut for every row, but I found a similar existing problem with Tooltip. The solution there is adding overflow: visible for columns which have tooltips worked for me.

But now I noticed that a fixed table header or other elements cause a tooltip to be cut as well. On the first screenshot you can see how tooltip is cut by table's header with a property fixedHeader={true}. A "hacky" solution to overcome this problem is to set this property to false but then tooltip will be cut by any other Material UI element which could be close to the tooltip (as shown on the second screenshot)

p.s.
I tried setting z-index as you mentioned above but it would not help at all in this case.

[kazzkiq]

Hmm, this is seems related to the parent element rather than the element holding tooltip itself. The z-index property only affects elements on the same hierarchy level in the DOM. This means that even if the tooltip has a bigger z-index, if the parent element (table) has no z-index defined, that will force its children elements to adopt that z-index outside of the parent.

Could you please try adding some z-index on your table as a whole to check if the issue keeps happening? E.g.:

/* apply this class to your table and/or <tr>/<td> to see if it works */
.move-me-up {
    position: relative;
    z-index: 9999;
}

[larnoult]

Hey,
Great plugin!
Unfortunately, I've got the exact same issue than @anvk .. Just tried your fix, adjusting position and z-index of the table and / or td, th .. With no luck. See https://dev.gephebase.org/summary-table?value=drosophila.

Any other idea?
Thanks for your help!

[kazzkiq]

@larnoult It seems that in your case the issue is related to overflow property.

Could you please try to set overflow: visible to your <th>, <td>, <tr>, <thead> and/or <table> to see if it works?

[larnoult]

Setting overflow:visible to <th> made the trick! Thanks for your quick reply!
I don't know about @anvk, but for me thread can be closed 👍

[kazzkiq]

I believe in most cases this happens because of overflow property and not z-index itself. So, for now I'm closing it.

If you guys have any other weird behaviors related to this issue, and the overflow: visible trick didn't solved it, please let me know.

[yosigolan]

Hey @kazzkiq
i see this issue as well. it happens in lists with scroll (on x vertical or y) when the tooltip is attached to a list element but appears outside the list. only the part of the tooltip that is inside the list can be seen. the overflow: visible solves it but then the list cant be scrolled so this is not a good solution in my case.

[kazzkiq]

@yosigolan sadly any element inside another element with overflow set to scroll, scroll-x, scroll-y or hidden will get cropped.

This isn't something we can deal with at Balloon.css, since it's a browser behavior.

The best you can do to mitigate this is change your tooltip position or width, making it less prone to getting out of the overflow element.

[yosigolan]

Thanks.