JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="pointer  imagewh">
  <div class="img-box">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLsza5efhXDC69Ka0TuAMa1bfm2tbtUHXKVSKn3yzgVoiXbu6A" class="responsive" />
    <span class="tooltiptext">Upload Icon</span>
  </div>
</div>

CSS

.pointer img {
     cursor: pointer;
     position: relative;
     display: inline-block;
     margin-bottom: 7px;
}
 .pointer .img-box {
     position:relative;
}
 .pointer .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: black;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
}
 .img-box:hover .tooltiptext {
     visibility: visible;
     right: calc( 0% - 60px);
     top: -30px;
}
 .responsive {
     max-width: 100%;
     height: auto;
}
 .imagewh{
     text-align:center;
     width: 110px;
     height: 110px;
}
 .imagewh img{
     position:relative;
     top:50%;
     transform: translateY(-50%);
}