I am facing an issue with two columns positioned side by side. The right column contains a tooltip that overflows to the left on hover. Both columns are scrollable and relatively positioned to allow the tooltip to follow the scroll. However, the tooltip is partially hidden by the left column. I want it to overflow past the edge as if it were positioned above the left column.
Here is a mockup of how it currently looks: https://jsfiddle.net/yL9ugkvj/35
JS
class Columns extends React.Component {
render() {
return (
<div className='flex'>
<div className='left'>
<div>
<div></div>
</div>
</div>
<div className='right'>
<div>
<div id="header">
<p className="label">
label
<div className='tooltip'>
<p>tooltip</p>
</div>
</p>
</div>
</div>
</div>
</div>
)
}
}
ReactDOM.render(<Columns />, document.querySelector("#app"))
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
div.flex {
display: grid;
grid-template-columns: 50% 50%;
}
div.left::-webkit-scrollbar {
display: none;
}
div.left {
display: flex;
flex-direction: column;
top: 0;
height: 92vh;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
justify-content: flex-start;
z-index: 0;
}
div.right::-webkit-scrollbar {
display: none;
}
div.right {
position: relative;
display: flex;
flex-direction: column;
top: 0;
height: 92vh;
overflow-y: scroll;
overflow-x: visible;
-ms-overflow-style: none;
scrollbar-width: none;
justify-content: flex-start;
z-index: 1;
}
div.flex>div>div {
border: 2px solid #E0E0E0;
background-color: #F5F4F2;
border-radius: 15px;
margin: 10px;
padding: 10px 40px;
min-width: 80%;
}
#header {
display: flex;
position: relative;
border: none;
margin: 0px;
padding: 0px;
overflow: visible;
}
div.tooltip {
display: none;
position: absolute;
border-radius: 12px;
background: #E8E6DE;
box-shadow: 0px 4px 11.9px 8px rgba(0, 0, 0, 0.25);
z-index: 3;
padding: 25px;
width: 35vw;
right: 100%;
}
p.label:hover>div.tooltip {
font-size: 16px;
display: inline-block;
padding: 10px 25px;
}
I've tried various solutions like adjusting z-index and setting the width manually, but none have worked. It used to work before I made each column independently scrollable, but now with relative positioning, it's causing issues.