Dash DataTable tooltips hidden outside of containing div

[harryj]

Hi guys.

I have a Dash DataTable with tooltips that show on hover for a number of cells. If the tooltip is at the bottom of the table it does not show outside of the tables containing Div. Image attached below.

Adding dash-datatable-tooltip {position: fixed;} to my css assets partially fixed this in that the tooltip is then shown outside of the containing div, however, when the screen is then scrolled the initial position remains and so the following tooltip positions are wrong.

I also tried updating the z-index of these tooltips within the same css file as mentioned above but this doesn’t seem to have any affect.

Does anyone have a solution for this that enables these tooltips to be displayed outside of their containing div while maintaining relative position?

Thanks!
H

[jinnyzor]

Hello @harryj,

You could try position: absolute and then zIndex: 2000 or something.

[harryj]

Hey!

Thanks for this. I’ve tried this, checked it’s being implemented by inspecting the css but weridly it still doesn’t work. I’m not sure if there are some Dash DataTable properties that are nullifying the affect of this css?

H

[jinnyzor]

Where does the tooltip appear in the dom tree for the browser?

It’s probably still being confined to the container div…

[harryj]

It’s within the Dash DashTable branch, probably because I’m using the DataTables tooltip function rather than building it from scratch.

I suppose building from scratch is a good solution but I’m still curious as to if I can get it working with Dash?

[jinnyzor]

Well, have you checked out AG grid?

You can have tooltips that are other components, this would take some configuring.

You could wrap it in a renderer with a dmc.Tooltip that I believe will change the position based upon factors like the edges.