On hover of slick text is hidden due to non responsive css how to make it responsive?

Question

I am not getting the on-hover dates but it is rendered to the page on inspecting I suspect it may be due to the responsive problem of CSS, or class breakage. How to resolve?

CSS code:

/* Adding for slick tool tip on hover */
.hover_slick {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.hover_slick .hover_slicktext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  /* font-size: 15px; */
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  /* position: absolute; */
  margin-top: -20px;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.hover_slick:hover .hover_slicktext {
  visibility: visible;
}

JS code

      function slider_config() {
        // Array conversion from the doc element
        var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
        // console.log(dateList);
        // Loop through its value and index since it is array
        dateList.forEach((value,index)=>{
          $("#hover_slicktext"+index).html(value);
        });
      

DIV

div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center></div>";