<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,700,700i" rel="stylesheet">

<div class="content">
  
  <div class="row">
    <a href="#" class="btn tooltip top">
      <span>TOOLTIP TOP</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a>
  </div>
    
  <div class="row">
    <a href="#" class="btn tooltip bottom">
      <span>TOOLTIP BOTTOM</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a>
  </div>
    
  <div class="row">
    <a href="#" class="btn tooltip right">
      <span>TOOLTIP RIGHT</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a>
  </div>
    
  
  <div class="row">
    <a href="#" class="btn tooltip left">
      <span>TOOLTIP LEFT</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a> 
  </div>
  
</div>

/* USELESS CSS */
.content {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  justify-content: center;
  padding: 2rem 0;
  width: 100vw;
}

.row {
  display: flex;
  margin: auto;
}

a {
  text-decoration: none;
}

.btn {
  margin: 0 .5em;
}

/* COLORS */
$white: #ffffff;
$gray-light: #cdd2d6;
$black: #000000;
$blue: #05a8ff;
$orange: #ff7033;
$red: #f7404f;
$green: #49c562;
$shadow: rgba(205,210,214,.8);

/* BUTTONS */
.btn {
  align-items: center;
  background-color: white;
  border: 1px solid $gray-light;
  box-sizing: border-box;
  color: $black;
  display: flex;
  height: 45px;
  letter-spacing: 2px;
  padding: .8em 1em;
  transition: all .3s ease;
  &:hover {
    background-color: $blue;
    border-color: $blue;
    color: $white;
  }
}

/* TOOLTIP */
.tooltip {
  position: relative;
  overflow: hidden;
  &:hover {
    overflow: visible;
    .tooltip-content {
      opacity: 1;
    }
  }
  
  .tooltip-content {
    background: $blue;
    box-shadow: 0 5px 25px 5px $shadow;
    box-sizing: border-box;
    color: $white;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 1px;
    max-width: 200px;
    min-width: 145px;
    padding: 1em;
    position: absolute;
    opacity: 0;
    transition: all .3s ease;
    &::after {
      background: $blue;
      content: "";
      height: 10px;
      position: absolute;
      transform: rotate(45deg);
      width: 10px;
    }
  }
  
  &.top {
    .tooltip-content {
      bottom: calc(100% + 1.5em);
      left: 50%;
      transform: translateX(-50%);
      &::after {
        bottom: -5px;
        left: 50%;
        margin-left: -5px;
      }
    }
  }
  
  &.bottom {
    .tooltip-content {
      bottom: calc(-100% - 1.8em);
      left: 50%;
      transform: translateX(-50%);
      &::after {
        top: -5px;
      }
    }
  }
  
  &.right {
    .tooltip-content {
      left: calc(100% + 1.5em);
      top: 50%;
      transform: translateY(-50%);
      &::after {
        left: -5px;
        margin-top: -5px;
        top: 50%;
      }
    }
  }
  &.left {
    .tooltip-content {
      right: calc(100% + 1.5em);
      top: 50%;
      transform: translateY(-50%);
      &::after {
        right: -5px;
        margin-top: -5px;
        top: 50%;
      }
    }
  }
  
}