Hey there!
Take a look at this piece of code:
<div className="box-and-clock">
{isBoxShown && (
<div className="box">
{value}
</div>
)}
<img
onMouseOver={() => setIsBoxShown(true)}
onMouseOut={() => setIsBoxShown(false)}
src={clockIcon}/>
</div>
This is the layout I have (trimmed down for simplicity)
https://i.sstatic.net/GGjTy.png
When the user hovers over the clock icon, they see some data. However, when there is too much data in the black box, the arrow (created using pseudoelements) doesn't align with the clock icon anymore, leading to something like this
https://i.sstatic.net/BMqfb.png
I'm trying to position that black box relative to the clock icon without being affected by its height.
I attempted using display: table on the parent div and display: table-cell on the child, but it didn't work. Any suggestions?
Here's my CSS:
.box {
width: 200px;
min-height: 130px;
height: auto;
background: black;
border-radius: 2px;
position: absolute;
top: 320px;
right: 228px;
}
.box-and-clock {
display: flex;
flex-direction: column;
}