css-tooltip-delay

by imys

HTML

<a class="block">
  Hover me
  <span class="tooltip">hello</span>
 </a>

SCSS

.block {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  color: #fff;
  border-radius: 3px;
  background: #2196F3;
  cursor: pointer;
  &:hover {
    background: #42a5f5;
    .tooltip {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
      transition: .2s ease-in-out .5s;
    }
  }
}

.tooltip {
   pointer-events: none;
   position: absolute;
   top: 100%;
   left: 50%;
   margin-top: 10px;
   padding: 4px 8px;
   color: #fff;
   background: #444;
   border-radius: 3px;
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, -30%);
   transition: .2s ease-in-out;
   will-change: opacity, transform;
   
   &:after {
     content: '';
     position: absolute;
     top: -14px;
     left: 50%;
     margin-left: -7px;
     border: 7px solid transparent;
     border-bottom-color: #444;
   }
}