.my-tooltip {
  position: relative;

  &:before {
    content: attr(data-text);
    position: absolute;
    z-index: 99;
    opacity: 0.8;
    
    top: 50%;
    transform: translateY(-50%);
    
    left: 100%;
    margin-left: 5px;
    
    width: 200px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color:  #fff;
    text-align: center;
  
    display: none;
  }

  &:hover:before,&:hover:after {
    display: block;;
  }
}