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?
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.
css scroll overflow css-grid
add a comment |
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.
css scroll overflow css-grid
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 yourbody
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
add a comment |
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.
css scroll overflow css-grid
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.
css scroll overflow css-grid
css scroll overflow css-grid
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 yourbody
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
add a comment |
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 yourbody
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
add a comment |
2 Answers
2
active
oldest
votes
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
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
add a comment |
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
*/
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
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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
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
add a comment |
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
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
add a comment |
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 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
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
add a comment |
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
add a comment |
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
*/
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
add a comment |
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
*/
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
add a comment |
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
*/
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
*/
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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