CSS: Grid, Scrollbars and Tooltip issueSet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

Why didn't Caesar move against Sextus Pompey immediately after Munda?

Is it OK to say "The situation is pregnant with a crisis"?

Could you fall off a planet if it was being accelerated by engines?

Why did the Apple IIe make a hideous noise if you inserted the disk upside down?

Having to constantly redo everything because I don't know how to do it

How far can gerrymandering go?

I agreed to cancel a long-planned vacation (with travel costs) due to project deadlines, but now the timeline has all changed again

Rear derailleur got caught in the spokes, what could be a root cause

What's the point of stochastic volatiliy models if you can use local volatility?

How to stop QGIS from looking for the wrong PostgreSQL host address in an existing workproject?

What prevents a US state from colonizing a smaller state?

Basic calculations in PGF/TikZ for loop

Processes in a session in an interactive shell vs in a script

What would you need merely the term "collection" for pitches, but not "scale"?

How soon after takeoff can you recline your airplane seat?

Two palindromes are not enough

What does 'in attendance' mean on an England death certificate?

How do I tell my girlfriend she's been buying me books by the wrong author for the last nine months?

Which high-degree derivatives play an essential role?

How can this fractal shape perfectly cover a certain platonic solid?

How to count the number of bytes in a file, grouping the same bytes?

What's the lunar calendar of two moons

Does friction always oppose motion?

Angle Between Two Vectors Facing A Point



CSS: Grid, Scrollbars and Tooltip issue


Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?













1















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:



screenshot



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:



Real world app



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.










share|improve this question
























  • Do you need the red element to overlay only the left panel, or the top nav as well? Moreover, should the red element scroll with the purple element, or stay in it's place When the purple area scrolls?

    – jensmtg
    Mar 25 at 20:36











  • the overflow behaviour is actually expected... you have to implement the tooltip in a different way - ideally a generic tooltip content should be the last in your body so that it can go on top of all other elements... that's how tooltip plugins do it...

    – kukkuz
    Mar 26 at 2:05












  • @jensmtg: Left Panel only is fine (ideally it should be on top of everything, but in my real-world app, it shouldn't need to). The red element should scroll with the purple element, as the div it's attached to (relative to) is the green one, which is part of the purple content.

    – Antoine Jaussoin
    Mar 26 at 14:30











  • @kukkuz: so that's tricky: in my actual app, this tooltip (actually much bigger than a tooltip), is visible on hover when hovering some table cells. Each cell has its own tooltip, so moving that DOM element to the end of the body won't work. I'll add a screenshot of the actual app in a minute.

    – Antoine Jaussoin
    Mar 26 at 14:31















1















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:



screenshot



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:



Real world app



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.










share|improve this question
























  • Do you need the red element to overlay only the left panel, or the top nav as well? Moreover, should the red element scroll with the purple element, or stay in it's place When the purple area scrolls?

    – jensmtg
    Mar 25 at 20:36











  • the overflow behaviour is actually expected... you have to implement the tooltip in a different way - ideally a generic tooltip content should be the last in your body so that it can go on top of all other elements... that's how tooltip plugins do it...

    – kukkuz
    Mar 26 at 2:05












  • @jensmtg: Left Panel only is fine (ideally it should be on top of everything, but in my real-world app, it shouldn't need to). The red element should scroll with the purple element, as the div it's attached to (relative to) is the green one, which is part of the purple content.

    – Antoine Jaussoin
    Mar 26 at 14:30











  • @kukkuz: so that's tricky: in my actual app, this tooltip (actually much bigger than a tooltip), is visible on hover when hovering some table cells. Each cell has its own tooltip, so moving that DOM element to the end of the body won't work. I'll add a screenshot of the actual app in a minute.

    – Antoine Jaussoin
    Mar 26 at 14:31













1












1








1








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:



screenshot



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:



Real world app



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.










share|improve this 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:



screenshot



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:



Real world app



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.







css scroll overflow css-grid






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 26 at 14:36







Antoine Jaussoin

















asked Mar 25 at 16:37









Antoine JaussoinAntoine Jaussoin

3,0894 gold badges19 silver badges34 bronze badges




3,0894 gold badges19 silver badges34 bronze badges












  • Do you need the red element to overlay only the left panel, or the top nav as well? Moreover, should the red element scroll with the purple element, or stay in it's place When the purple area scrolls?

    – jensmtg
    Mar 25 at 20:36











  • the overflow behaviour is actually expected... you have to implement the tooltip in a different way - ideally a generic tooltip content should be the last in your body so that it can go on top of all other elements... that's how tooltip plugins do it...

    – kukkuz
    Mar 26 at 2:05












  • @jensmtg: Left Panel only is fine (ideally it should be on top of everything, but in my real-world app, it shouldn't need to). The red element should scroll with the purple element, as the div it's attached to (relative to) is the green one, which is part of the purple content.

    – Antoine Jaussoin
    Mar 26 at 14:30











  • @kukkuz: so that's tricky: in my actual app, this tooltip (actually much bigger than a tooltip), is visible on hover when hovering some table cells. Each cell has its own tooltip, so moving that DOM element to the end of the body won't work. I'll add a screenshot of the actual app in a minute.

    – Antoine Jaussoin
    Mar 26 at 14:31

















  • Do you need the red element to overlay only the left panel, or the top nav as well? Moreover, should the red element scroll with the purple element, or stay in it's place When the purple area scrolls?

    – jensmtg
    Mar 25 at 20:36











  • the overflow behaviour is actually expected... you have to implement the tooltip in a different way - ideally a generic tooltip content should be the last in your body so that it can go on top of all other elements... that's how tooltip plugins do it...

    – kukkuz
    Mar 26 at 2:05












  • @jensmtg: Left Panel only is fine (ideally it should be on top of everything, but in my real-world app, it shouldn't need to). The red element should scroll with the purple element, as the div it's attached to (relative to) is the green one, which is part of the purple content.

    – Antoine Jaussoin
    Mar 26 at 14:30











  • @kukkuz: so that's tricky: in my actual app, this tooltip (actually much bigger than a tooltip), is visible on hover when hovering some table cells. Each cell has its own tooltip, so moving that DOM element to the end of the body won't work. I'll add a screenshot of the actual app in a minute.

    – Antoine Jaussoin
    Mar 26 at 14:31
















Do you need the red element to overlay only the left panel, or the top nav as well? Moreover, should the red element scroll with the purple element, or stay in it's place When the purple area scrolls?

– jensmtg
Mar 25 at 20:36





Do you need the red element to overlay only the left panel, or the top nav as well? Moreover, should the red element scroll with the purple element, or stay in it's place When the purple area scrolls?

– jensmtg
Mar 25 at 20:36













the overflow behaviour is actually expected... you have to implement the tooltip in a different way - ideally a generic tooltip content should be the last in your body so that it can go on top of all other elements... that's how tooltip plugins do it...

– kukkuz
Mar 26 at 2:05






the overflow behaviour is actually expected... you have to implement the tooltip in a different way - ideally a generic tooltip content should be the last in your body so that it can go on top of all other elements... that's how tooltip plugins do it...

– kukkuz
Mar 26 at 2:05














@jensmtg: Left Panel only is fine (ideally it should be on top of everything, but in my real-world app, it shouldn't need to). The red element should scroll with the purple element, as the div it's attached to (relative to) is the green one, which is part of the purple content.

– Antoine Jaussoin
Mar 26 at 14:30





@jensmtg: Left Panel only is fine (ideally it should be on top of everything, but in my real-world app, it shouldn't need to). The red element should scroll with the purple element, as the div it's attached to (relative to) is the green one, which is part of the purple content.

– Antoine Jaussoin
Mar 26 at 14:30













@kukkuz: so that's tricky: in my actual app, this tooltip (actually much bigger than a tooltip), is visible on hover when hovering some table cells. Each cell has its own tooltip, so moving that DOM element to the end of the body won't work. I'll add a screenshot of the actual app in a minute.

– Antoine Jaussoin
Mar 26 at 14:31





@kukkuz: so that's tricky: in my actual app, this tooltip (actually much bigger than a tooltip), is visible on hover when hovering some table cells. Each cell has its own tooltip, so moving that DOM element to the end of the body won't work. I'll add a screenshot of the actual app in a minute.

– Antoine Jaussoin
Mar 26 at 14:31










2 Answers
2






active

oldest

votes


















0














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






share|improve this answer


















  • 1





    Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

    – Antoine Jaussoin
    Mar 26 at 14:38











  • Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

    – Michael_B
    Mar 26 at 14:50











  • I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

    – Antoine Jaussoin
    Mar 26 at 15:57


















0














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






share|improve this answer




















  • 1





    This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

    – Antoine Jaussoin
    Mar 28 at 11:51













Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55342532%2fcss-grid-scrollbars-and-tooltip-issue%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














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






share|improve this answer


















  • 1





    Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

    – Antoine Jaussoin
    Mar 26 at 14:38











  • Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

    – Michael_B
    Mar 26 at 14:50











  • I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

    – Antoine Jaussoin
    Mar 26 at 15:57















0














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






share|improve this answer


















  • 1





    Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

    – Antoine Jaussoin
    Mar 26 at 14:38











  • Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

    – Michael_B
    Mar 26 at 14:50











  • I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

    – Antoine Jaussoin
    Mar 26 at 15:57













0












0








0







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






share|improve this answer













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







share|improve this answer












share|improve this answer



share|improve this answer










answered Mar 26 at 2:27









Michael_BMichael_B

168k51 gold badges276 silver badges385 bronze badges




168k51 gold badges276 silver badges385 bronze badges







  • 1





    Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

    – Antoine Jaussoin
    Mar 26 at 14:38











  • Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

    – Michael_B
    Mar 26 at 14:50











  • I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

    – Antoine Jaussoin
    Mar 26 at 15:57












  • 1





    Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

    – Antoine Jaussoin
    Mar 26 at 14:38











  • Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

    – Michael_B
    Mar 26 at 14:50











  • I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

    – Antoine Jaussoin
    Mar 26 at 15:57







1




1





Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

– Antoine Jaussoin
Mar 26 at 14:38





Many thanks for your answer @Michael_B, unfortunately I can't distance my tooltip from this specific node: as you can see on the "real app" screenshot, the tooltip must be pointing to a specific cell in a table, and I have no way of positioning that correctly if I'm not positioning the tooltip directly relative to that cell.

– Antoine Jaussoin
Mar 26 at 14:38













Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

– Michael_B
Mar 26 at 14:50





Understood. So then, if the tooltip is absolutely-positioned relative to the same container that is overflowing, keeping the tooltip in a fixed position is not possible, at least not with this method.

– Michael_B
Mar 26 at 14:50













I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

– Antoine Jaussoin
Mar 26 at 15:57





I was afraid it might be the case. It's odd because I can't see any technical reason browsers shouldn't be able to do that. I'll probably have to resort to using JavaScript, fixed positioning and tracking the position of the cell I need to attach the tooltip to. Hacky, but if there's no other way...

– Antoine Jaussoin
Mar 26 at 15:57











0














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






share|improve this answer




















  • 1





    This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

    – Antoine Jaussoin
    Mar 28 at 11:51















0














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






share|improve this answer




















  • 1





    This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

    – Antoine Jaussoin
    Mar 28 at 11:51













0












0








0







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






share|improve this answer















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







share|improve this answer














share|improve this answer



share|improve this answer








edited Mar 26 at 16:42

























answered Mar 26 at 16:32









jensmtgjensmtg

5185 silver badges19 bronze badges




5185 silver badges19 bronze badges







  • 1





    This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

    – Antoine Jaussoin
    Mar 28 at 11:51












  • 1





    This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

    – Antoine Jaussoin
    Mar 28 at 11:51







1




1





This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

– Antoine Jaussoin
Mar 28 at 11:51





This is actually a very great idea! Very "outside-the-box", I love it, and it could indeed well be the solution to my problem. I'll try and implement it now, and will accept the answer if it works. Thank you!!

– Antoine Jaussoin
Mar 28 at 11:51

















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55342532%2fcss-grid-scrollbars-and-tooltip-issue%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현