<h1>Easy Tooltips</h1>
<section>
  <article>
    <p> This is an example of a tooltip on the right top corner <span class="tooltip up-left">↖</span> </p>
  </article>
  <article>
    <p> <span class="tooltip center-left">→</span> This is an example of a tooltip on the left center.</p>
  </article>
  <article>
    <p> This is an example of a tooltip centered at the bottom <span class="tooltip bottom-center"> ↓</span> </p>
  </article>
</section>

@import "bourbon";
@import "neat";
@import url(https://fonts.googleapis.com/css?family=Oswald);

// Variables
$deep-orange: #E67E22;
$base-font-size: 1.5em;
$main-text: 'Oswald', sans-serif;
$after-before: "&:after, &:before";

// Neat Breakpoints
$medium-screen: em(640);

body {
  background: $deep-orange;
  font-family: $main-text;
  font-size: $base-font-size;
  text-align: center;
  padding: 100px;
}

// Grid Settings
section {
  @include outer-container;
}

article {
  @include media($medium-screen) {
   @include span-columns(4); 
  }
}

// General Tooltip styles
.tooltip {
  @include size(20px);
  background: lighten($deep-orange, 25%);
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  font-family: $helvetica;
  font-size: $base-font-size * 0.5;
  position: relative;
  z-index: auto;

  #{$after-before} {
    @include position(absolute, null null null null);
    @include transition(all .25s ease-in-out);
    opacity: 0;
    text-align: left;
    visibility: hidden;
    z-index: 1;
  }
  
  &:after { 
    @include size(100px);
    background: white;
    border-radius: 10px;
    color: black;
    padding: 10px;
  }
  
  &:before {
    content: "";
  }
  
  &:hover {
    
    #{$after-before} {
      opacity: 1;
      visibility: visible;
    }
  }
}

// Up - Left
.up-left {
  
  &:after {
    @include position(null, 25px -110px null null);   
    content: "Direction up left";
  }

  &:before {
    @include position(null, 25px -35px null null);
    @include triangle(25px 25px, white transparent, up-left);
  }
}

// Bottom - Left
.bottom-center {
  
  &:after {
    @include position(null, null -40px 45px null);
    content: "Direction Down";
  }

  &:before {
    @include position(null, null 0px 25px null);
    @include triangle(20px 20px, white transparent, down);
  }
}

// Left - Center
.center-left {
  
  &:after {
    @include position(null, -35px -120px null null);
    content: "Direction center left";
  }

  &:before {
    @include position(null, 0 -20px null null);
    @include triangle(25px, white, left);
  }
}