Skip to content
Advertisement

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

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?

On hover of loading bar bullet the hover text is not visible

Inspect of the issue

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>";

Answer

This is due to the relative position of the hover. Reducing the relative position and reducing the font size will solve the issue.

.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: 20px;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  /* position: absolute; */
  margin-top: -20px;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
Advertisement