Span tooltip is getting hidden - html

Question

I have an image container with images and text below it. Since the title of image is long, i used text-overflow property to hide long text and used a tooltip for displaying the long text of title when i hover over the title.
I was facing an issue wheerin when i scroll the image, the tooltip would remain fixed so i asked it in herelink
HTML code:
<div className="image-container">
<center>
<div className='container p-1'>
<div className="image">
<img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img>
<div className="caption">Product Title<br></br>
<small className='ellipsis'>Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</small>
<span className="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
</div>
</div>
</div>
<div className='container p-1'>
<div className="image">
<img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
<div className="caption">Left Product Title<br></br>
<small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
<span className="tooltiptext">Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
</div>
</div>
</div>
<div className='container p-1'>
<div className="image">
<img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
<div className="caption">Right Product Title<br></br>
<small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
<span className="tooltiptext">Third Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
</div>
</div>
</div>
</center>
</div>
CSS code:
title {
font-size: 42px;
}
figure figcaption {
border: 1px dotted gray;
text-align: center;
}
.container {
margin: 10px;
display: inline-block;
justify-content: center;
width: 50%;
flex-direction: column;
border: 1px solid black;
}
.caption{
justify-content: center;
border-top: 1px solid black;
}
.image{
width: 100%;
vertical-align: middle;
}
.image-container {
position: relative;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
/* overflow-x: auto; */
overflow-y: hidden;
width: 100%;
}
.details{
background-color: white;
position: relative;
overflow: scroll;
box-sizing: border-box;
height: 100vh;
}
.ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding:.5rem 1rem;
cursor: pointer;
}
.ellipsis:focus .ellipsis:hover{
color: red;
}
.box{
border-top: 1px solid black;
}
.tooltiptext{
position:absolute;
z-index: 999;
/* top:105%; */
/* left:0%; */
/* right: 0; */
/*op: 105%;
left: 0%;*/
transform: translateY(0%);
background-color: #000;
border-radius: 7px;
color: #fff;
font-size: 15px;
line-height: 20px;
/*padding: 10px 5px;*/
display: block;
width: 200px;
word-wrap: break-word;
white-space: normal;
text-align: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
.ellipsis:hover+.tooltiptext{
visibility: visible;
opacity: 1;
}
Suggestion was provided to add .image-container{ position: relative;} and .tooltiptext{position: absolute;}
I did the above change but after that though the tooltip is relative, the tooltip text is getting hidden :(
I tried adding z-index:1 and z-index:999 in the .tooltiptext but still same issue. Can someone help me achieve this so that tooltip is above all and relative to the images scroll?