Styjun

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.

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

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
 */