JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vertical">
   <div class="frame"></div>
   <div class="info">
      <div class="header">
         <div class="name">Hover</div>
      </div>
      <div class="st"></div>
      <div class="arrow"></div>
   </div>
</div>

CSS

.vertical {
    height: 70px;
    width: 70px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: solid lightgrey;
    position: relative;
}

.frame {
    height: 100%;
}

.st {
    height: 250px;
}

.info {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 120%;
    margin-left: -5px;
    border-radius: 5px;
    border: solid black 1px;
    color: white;
}

.vertical:hover .info {
    visibility: visible;
}

.arrow {
    position: absolute;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
    top: 25px;
}