<button type="submit" class='edit'>
<img src='https://via.placeholder.com/20x20' height='20px' width='20px'alt="edit">
<span class='tooltiptext'>Edit</span>
</button>
.edit {
-webkit-appearance: none;
-moz--appearance: none;
appearance: none;
display: block;
position: relative;
width: 20px;
height: 20px;
border: none;
margin:0;
padding: 0;
border-radius: 0;
background: none;
cursor:pointer;
}
.tooltiptext {
position: absolute;
top: 100%;
left: -999em;
margin:2px;
opacity: 0;
width: 70px;
background-color: #fff8dc;
border: 1px solid #cbcbcb;
border-radius: 6px;
text-align: center;
box-shadow:0 0 5px rgba(0,0,0,0.3);
z-index: -1;
transition: left 0s, opacity 0.5s ease;
}
.edit:hover .tooltiptext {
left: 0;
opacity: 1;
z-index: 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.