CSS: Grid, Scrollbars and Tooltip issue - css

Question

I've been pulling my hairs over a CSS issue that I will try to describe here:
In the following example (https://codesandbox.io/s/jjq4km89y5), you can see a scrollable content (purple background), and a "tooltip" (always showing in this example for practical reasons, red background) that is half hidden by the left panel.
What I need is for both the purple content to be scrollable, AND for the red tooltip to show:
The CSS uses CSS Grid, but the problem is the same if I use flex instead.
The problem seems to lies on the overflow: auto statement, (line 59 of styles.css in the code sandbox).
Thanks!!
(to see the example live, please go to https://codesandbox.io/s/jjq4km89y5)
The code, otherwise, can be seen here:
<div class="page">
<div class="menu">Menu</div>
<div class="content">
<div class="grid">
<div class="nav">Top Nav</div>
<div class="panel">Left Panel</div>
<div class="analysis">
<div>
<p>Some random content</p>
<div class="tooltip-trigger">
A div with a Tooltip (always showing here)
<div class="tooltip">
You should be able to see the entirety of this text here,
going over the Left Nav
</div>
</div>
<div class="long-content">
Some very long content that should make the purple div scroll
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS:
.page {
display: flex;
margin: 0;
height: 100%;
width: 100%;
position: fixed;
}
.menu {
width: 40px;
background-color: orange;
height: 100%;
}
.content {
flex: 1;
}
.grid {
display: grid;
grid-template-columns: 210px auto;
grid-template-rows: 60px auto;
grid-template-areas:
"nav nav"
"panel analysis";
height: 100%;
}
.nav {
grid-area: nav;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: grey;
border-bottom: 3px solid black;
}
.panel {
grid-area: panel;
border-right: solid 3px black;
background-color: grey;
}
.panel > div {
height: calc(100vh - 60px);
}
.analysis {
grid-area: analysis;
padding: 60px;
height: calc(100vh - 60px);
background-color: purple;
/* The problem is here:
if set to "auto", then we have a scrollbar but the red tooltip is not visible
If set to "visible", we get the red tooltip but the scroll is gone
*/
overflow: auto;
}
.tooltip-trigger {
position: relative;
background-color: green;
border: 5px dashed rebeccapurple;
}
.tooltip {
position: absolute;
border: 5px dashed orange;
background-color: red;
height: 200px;
width: 200px;
top: 10px;
left: -200px;
}
.long-content {
height: 3000px;
background-color: pink;
border: 5px dashed darkred;
}
You can also see the real-world app and what it does:
The tooltip as you can see will display for all these cells in the table, and needs to be precisely attached to that cell.
The content where the table is needs to be scrollable as well.

Answer 1

This may be a solution, or just a nudge in the right direction.
Instead of the tooltip being absolutely-positioned relative to the parent element, make it relative to a more distant ancestor, so it's not affected by the overflow of the purple div.
So, instead of this:
.grid {
display: grid;
grid-template-columns: 210px auto;
grid-template-rows: 60px auto;
grid-template-areas:
"nav nav"
"panel analysis";
height: 100%;
}
.tooltip-trigger {
position: relative;
background-color: green;
border: 5px dashed rebeccapurple;
}
.tooltip {
position: absolute;
border: 5px dashed orange;
background-color: red;
height: 200px;
width: 200px;
top: 10px;
left: -200px;
}
Try something along these lines:
.grid {
position: relative; /* new */
display: grid;
grid-template-columns: 210px auto;
grid-template-rows: 60px auto;
grid-template-areas:
"nav nav"
"panel analysis";
height: 100%;
position: relative;
}
.tooltip-trigger {
/* position: relative; */
background-color: green;
border: 5px dashed rebeccapurple;
}
.tooltip {
position: absolute;
border: 5px dashed orange;
background-color: red;
height: 200px;
width: 200px;
top: 200px; /* adjusted */
left: 60px; /* adjusted */
}
revised demo

Answer 2

This may be a bit of a hack, but I think it can be made to work without too bad side effects: Instead of arranging the left panel and analysis as sibling DOM-nodes, you could layer analysis inside and over left panel.
With some tweaking to adjust placement of content you could make it look like they are side by side. Instead of scrolling analysis, with a static left panel, you can scroll left panel and make the left panel content absolutely positioned.
I made a quick and dirty implementation to demonstrate the mechanics:
Revised code example
Markup:
<div className="panel">
<div className="panelContent">Left Panel</div>
<div className="panelSpacer" />
<div className="analysis">
<div>
<p>Some random content</p>
<div className="tooltip-trigger">
A div with a Tooltip (always showing here)
<div className="tooltip">
You should be able to see the entirety of this text here,
going over the Left Nav
</div>
</div>
<div className="long-content">
Some very long content that should make the purple div scroll
</div>
</div>
</div>
</div>
CSS:
.panel {
grid-area: panel;
border-right: solid 3px black;
background-color: gray;
display: flex;
justify-content: space-between;
overflow: auto;
}
.panelSpacer {
width: 210px;
position: relative;
top: 0;
}
.panelContent {
width: 210px;
position: absolute;
top: 60px;
}
.panel > div {
height: calc(100vh - 60px);
}
.analysis {
position: relative;
width: calc(100% - 210px);
padding: 60px;
height: 100%;
background-color: purple;
/* The problem is here:
if set to "auto", then we have a scrollbar but the red tooltip is not visible
If set to "visible", we get the red tooltip but the scroll is gone
*/
}