Generated by SassMeister.com.

SassMeister-input-HTML.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/AnimatedButtons/css/style7.css">
<link type="text/css" rel="stylesheet" href="http://s2.trrsf.com/update-1403010919/fe/zaz-morph/_css/zaz.css"  />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<form action="">
<input type="radio" name="vertical" value="--bottom" checked>--bottom<br>
<input type="radio" name="vertical" value="--top">--top<br>
<input type="radio" name="horizontal" value="--left" checked>--left<br>
<input type="radio" name="horizontal" value="--right">--right
</form>

<a href="#teste1" id="teste1" class="buttom">
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>
<a href="#teste2" id="teste2" class="buttom" data-tooltip="piroca" >
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>


 <div class="wrap__tooltip">
    ancora da tooltip
    <div class="tooltip tooltip--top--left--branding">teste</div>
  </div>
  
<script>
  var tooltip = $(".tooltip");
  $("input").change(function(){
   tooltip.className="tooltip tooltip"+ $('input[name="vertical"]:checked').val()+
  $('input[name="horizontal"]:checked').val()
    })
  
</script>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  }
  .example{
    margin: 50px;
  }
  a {text-decoration:none;}
  .cu {
    position: inherit !important;
  }
  body {
    margin-top:100px;
    background: whitesmoke;
  }
  @mixin tooltip-color-modifier($name, $bg, $color:false){
    [class^="tooltip"][class*="--#{$name}"] {
      background:$bg;
      @if $color {
        color: $color;
      }
      @content;
      &::before {
        border-top-color:$bg;
        border-bottom-color:$bg;
      }
    }
  }
  
  .wrap__tooltip{
    position:relative;
    background:red;
    &:hover {
      .tooltip{
        opacity:1;
      
        visibility:visible;
      }
    }
  }
  .tooltip {
    transition:opacity .4s;
    &::after{
      content:attr(class);
    }
    opacity:0;
    visibility:hidden;
    margin:5px 0;
    max-width:200px;
    background: #000;
    border-radius:10px;
    display:inline-block;
    color:white;
    position: absolute;
    padding:10px;
    box-shadow: 1px -1px 5px 1px #ccc;
    &::before {
      content:"";
      display:block;
      position:absolute;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #000;
      border-bottom: 0 solid #000;
    }
  }
  
  @include tooltip-color-modifier(notification,#50BC37); 
  @include tooltip-color-modifier(branding,#FF7212); 
  @include tooltip-color-modifier(red,#D72007); 
  @include tooltip-color-modifier(ye,#FFCE1E, black); 
  @include tooltip-color-modifier(social,#245BE7);
  
    [class^="tooltip"][class*="--top"]{
      top:100%;
      &::before {
        border-top : 0;
        border-bottom-width: 10px;
        top:-5px;
      }
    }
    [class^="tooltip"][class*="--bottom"]{
      bottom:100%;
    &::before {
      bottom:-5px;
    }
  }
    [class^="tooltip"][class*="--right"]{
      
      right:0px;
      &::before {
        right:5px;
      }
    }
    [class^="tooltip"][class*="--left"]{
      left: 0px;
      &::before {
        left: 5px;
      }
    }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
.buttom {
  
  
  background: white;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius:25px;
  transition: box-shadow .2s;
  border-bottom: 2px solid #ccc;
  font-size: 14px;
  &:hover {
   box-shadow: 1px 1px 2px 1px rgba(224, 224, 224, 1);
  }
  &:active {
    border-top: 2px solid #ccc;
    border-bottom: 0;
  
  }
  &__text {
    display:inline-block;
    max-width:300px;
    transition:max-width 1s ease;
    white-space:nowrap;
    overflow: hidden;
    vertical-align: middle;
  }
  .a-btn-symbol
  {
    vertical-align: middle; 
  }
  &:target &__text ,
  &.closed &__text {
    max-width:0;
  }
  
}

SassMeister-output.css

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

.example {
  margin: 50px;
}

a {
  text-decoration: none;
}

.cu {
  position: inherit !important;
}

body {
  margin-top: 100px;
  background: whitesmoke;
}

.wrap__tooltip {
  position: relative;
  background: red;
}
.wrap__tooltip:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

.tooltip {
  transition: opacity .4s;
  opacity: 0;
  visibility: hidden;
  margin: 5px 0;
  max-width: 200px;
  background: #000;
  border-radius: 10px;
  display: inline-block;
  color: white;
  position: absolute;
  padding: 10px;
  box-shadow: 1px -1px 5px 1px #ccc;
}
.tooltip::after {
  content: attr(class);
}
.tooltip::before {
  content: "";
  display: block;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  border-bottom: 0 solid #000;
}

[class^="tooltip"][class*="--notification"] {
  background: #50bc37;
}
[class^="tooltip"][class*="--notification"]::before {
  border-top-color: #50bc37;
  border-bottom-color: #50bc37;
}

[class^="tooltip"][class*="--branding"] {
  background: #ff7212;
}
[class^="tooltip"][class*="--branding"]::before {
  border-top-color: #ff7212;
  border-bottom-color: #ff7212;
}

[class^="tooltip"][class*="--red"] {
  background: #d72007;
}
[class^="tooltip"][class*="--red"]::before {
  border-top-color: #d72007;
  border-bottom-color: #d72007;
}

[class^="tooltip"][class*="--ye"] {
  background: #ffce1e;
  color: black;
}
[class^="tooltip"][class*="--ye"]::before {
  border-top-color: #ffce1e;
  border-bottom-color: #ffce1e;
}

[class^="tooltip"][class*="--social"] {
  background: #245be7;
}
[class^="tooltip"][class*="--social"]::before {
  border-top-color: #245be7;
  border-bottom-color: #245be7;
}

[class^="tooltip"][class*="--top"] {
  top: 100%;
}
[class^="tooltip"][class*="--top"]::before {
  border-top: 0;
  border-bottom-width: 10px;
  top: -5px;
}

[class^="tooltip"][class*="--bottom"] {
  bottom: 100%;
}
[class^="tooltip"][class*="--bottom"]::before {
  bottom: -5px;
}

[class^="tooltip"][class*="--right"] {
  right: 0px;
}
[class^="tooltip"][class*="--right"]::before {
  right: 5px;
}

[class^="tooltip"][class*="--left"] {
  left: 0px;
}
[class^="tooltip"][class*="--left"]::before {
  left: 5px;
}

.buttom {
  background: white;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 25px;
  transition: box-shadow .2s;
  border-bottom: 2px solid #ccc;
  font-size: 14px;
}
.buttom:hover {
  box-shadow: 1px 1px 2px 1px #e0e0e0;
}
.buttom:active {
  border-top: 2px solid #ccc;
  border-bottom: 0;
}
.buttom__text {
  display: inline-block;
  max-width: 300px;
  transition: max-width 1s ease;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.buttom .a-btn-symbol {
  vertical-align: middle;
}
.buttom:target .buttom__text, .buttom.closed .buttom__text {
  max-width: 0;
}

SassMeister-rendered.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/AnimatedButtons/css/style7.css">
<link type="text/css" rel="stylesheet" href="http://s2.trrsf.com/update-1403010919/fe/zaz-morph/_css/zaz.css"  />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<form action="">
<input type="radio" name="vertical" value="--bottom" checked>--bottom<br>
<input type="radio" name="vertical" value="--top">--top<br>
<input type="radio" name="horizontal" value="--left" checked>--left<br>
<input type="radio" name="horizontal" value="--right">--right
</form>

<a href="#teste1" id="teste1" class="buttom">
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>
<a href="#teste2" id="teste2" class="buttom" data-tooltip="piroca" >
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>


 <div class="wrap__tooltip">
    ancora da tooltip
    <div class="tooltip tooltip--top--left--branding">teste</div>
  </div>
  
<script>
  var tooltip = $(".tooltip");
  $("input").change(function(){
   tooltip.className="tooltip tooltip"+ $('input[name="vertical"]:checked').val()+
  $('input[name="horizontal"]:checked').val()
    })
  
</script>