<div class="wrapper">
  <h1>Friendly Little Tooltips</h1>
  <ul class="social-links">
    <li>
      <a href="https://codepen.io/joshua_ward/pens/public/" target="_blank" data-tooltip="Codepen" data-position="top" class="top">
        <i class="fa fa-codepen"></i></a>
    </li>
    <li>
      <a href="https://dribbble.com/joshua_ward" target="_blank" data-tooltip="Dribbble" data-position="right" class="right">
        <i class="fa fa-dribbble"></i></a>
    </li>
    <li>
      <a href="https://twitter.com/joshua_ward" target="_blank" data-tooltip="Twitter" data-position="bottom" class="bottom">
        <i class="fa fa-twitter"></i></a>
    </li>
    <li>
      <a href="https://www.geekstudios.co" target="_blank" data-tooltip="Website" data-position="left" class="left">
        <i class="fa fa-globe"></i></a>
    </li>
  </ul>
</div> 

@import "bourbon";
@import "neat";
 
body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;

  background-image: url('https://static.pexels.com/photos/338533/pexels-photo-338533.jpeg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  &:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #c21500; 
    background: -webkit-linear-gradient(45deg, #651fff, #ffc500);
    background: linear-gradient(45deg, #651fff, #ffc500);
    opacity: 0.9;
    z-index: 0;
  }
}

.icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  color: white;
  -webkit-mask: 
    url('http://geekstudios.co/testing/assets/svg/logo.svg')
    no-repeat center;
  mask: 
    url('http://geekstudios.co/testing/assets/svg/logo.svg')
    no-repeat left center;
  -webkit-mask-size: 24px;
  mask-size: 24px;
  background-color: white;
}

.wrapper {
  width: 50%;
  height: 50%;
  
  h1 {
    position: relative;
    display: block;
    //flex: 1 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 100;
    color: white;
    letter-spacing: 1px;
    line-height: 3;
    text-align: center;
  }
  
  .social-links {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    
    li {
      display: inline-block;
      width: 25%;
      text-align: center;
      float: left;
      
      a {
        font-size: 24px;
        color: whitesmoke;
      }
    }
  }
}

// animations
a[data-tooltip].top {
  &:before,
  &:after {
    transform: translateY(10px);
  }
  
  &:hover:after,
  &:hover:before {
    transform: translateY(0px);
  }
}

a[data-tooltip].right {
  &:before,
  &:after {
    transform: translateX(0px);
  }
  
  &:hover:after,
  &:hover:before {
    transform: translateX(10px);
  }
}

a[data-tooltip].bottom {
  &:before,
  &:after {
    transform: translateY(-10px);
  }
  
  &:hover:after,
  &:hover:before {
    transform: translateY(0px);
  }
}

a[data-tooltip].left {
  &:before,
  &:after {
    transform: translateX(0px);
  }
  
  &:hover:after,
  &:hover:before {
    transform: translateX(-10px);
  }
}

a[data-tooltip] {
  position: relative;

  &:after,
  &:before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    box-shadow: 0 0 10px rgba(black,0.3);
    z-index: 99;
  }

  &:before {
    content: attr(data-tooltip);
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  &:after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: '';
  }

  &:hover:after,
  &:hover:before {
    visibility: visible;
    opacity: 0.85;
    transform: translateY(0px);
  }
}

// top tooltip
a[data-tooltip][data-position="top"]:before {
  bottom: 100%;
  left: -130%;
  margin-bottom: 10px;
}

a[data-tooltip][data-position="top"]:after {
  border-top-color: #000;
  border-bottom: none;
  bottom: 101%;
  left: calc(50% - 6px);
  margin-bottom: 4px;
}
// left tooltip
a[data-tooltip][data-position="left"]:before {
  top: -12%;
  right: 100%;
  margin-right: 10px;
}

a[data-tooltip][data-position="left"]:after {
  border-left-color: #000;
  border-right: none;
  top: calc(50% - 3px);
  right: 100%;
  margin-top: -6px;
  margin-right: 4px;
}
// right tooltip
a[data-tooltip][data-position="right"]:before {
  top: -5%;
  left: 100%;
  margin-left: 10px;
}

a[data-tooltip][data-position="right"]:after {
  border-right-color: #000;
  border-left: none;
  top: calc(50% - 6px);
  left: calc(100% + 4px);
}

// bottom tooltip
a[data-tooltip][data-position="bottom"]:before {
  top: 100%;
  left: -130%;
  margin-top: 10px;
}

a[data-tooltip][data-position="bottom"]:after {
  border-bottom-color: #000;
  border-top: none;
  top: 100%;
  left: 5px;
  margin-top: 4px;
}