1- When the cursor hovers over the icon, a tooltip appears. However, as the screen shrinks slightly, the position of the div changes. How can I prevent this?
EDIT: Simply adding margin: auto; and transform: translateX(-250px); properties to the .installmentinfo__container class resolved the issue.
2- Another question I have is regarding the positioning of the tooltip that opens below the icon. How can I ensure there is no space between the dropdown and the icon?
Note: The tooltip should appear at the bottom left of the icon.
I managed to fix the second problem mentioned above.
Refer to the image below for context:
https://i.sstatic.net/BhwAQ.png
html
<div className="installmentinfo__container">
{
props.installmentList?.map((e, i) => {
return (
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{e.date}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
);
})
}
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
right: 340px;
background-color: white;
&:last-of-type {
border-bottom: none;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}